diff --git a/docs/lib/Components/TooltipsPage.js b/docs/lib/Components/TooltipsPage.js index 3549dd5ff..47d86a4d8 100644 --- a/docs/lib/Components/TooltipsPage.js +++ b/docs/lib/Components/TooltipsPage.js @@ -51,6 +51,8 @@ export default class TooltipsPage extends React.Component { className: PropTypes.string, // Apply class to the inner-tooltip innerClassName: PropTypes.string, + // Apply class to the arrow-tooltip ('arrow' by default) + arrowClassName: PropTypes.string, // optionally hide tooltip when hovering over tooltip content - default true autohide: PropTypes.bool, // convenience attachments for popover diff --git a/src/PopperContent.js b/src/PopperContent.js index 182c17e65..5e34a76c4 100644 --- a/src/PopperContent.js +++ b/src/PopperContent.js @@ -10,6 +10,7 @@ const propTypes = { className: PropTypes.string, placement: PropTypes.string, placementPrefix: PropTypes.string, + arrowClassName: PropTypes.string, hideArrow: PropTypes.bool, tag: PropTypes.string, isOpen: PropTypes.bool.isRequired, @@ -137,6 +138,7 @@ class PopperContent extends React.Component { offset, fallbackPlacement, placementPrefix, + arrowClassName: _arrowClassName, hideArrow, className, tag, @@ -144,7 +146,10 @@ class PopperContent extends React.Component { modifiers, ...attrs } = this.props; - const arrowClassName = mapToCssModules('arrow', cssModule); + const arrowClassName = mapToCssModules(classNames( + 'arrow', + _arrowClassName + ), cssModule); const placement = (this.state.placement || attrs.placement).split('-')[0]; const popperClassName = mapToCssModules(classNames( className, diff --git a/src/Tooltip.js b/src/Tooltip.js index c0fda2213..f5095456e 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -21,6 +21,7 @@ const propTypes = { hideArrow: PropTypes.bool, className: PropTypes.string, innerClassName: PropTypes.string, + arrowClassName: PropTypes.string, cssModule: PropTypes.object, toggle: PropTypes.func, autohide: PropTypes.bool, @@ -229,6 +230,7 @@ class Tooltip extends React.Component { hideArrow={this.props.hideArrow} placement={this.props.placement} placementPrefix={this.props.placementPrefix} + arrowClassName={this.props.arrowClassName} container={this.props.container} modifiers={this.props.modifiers} offset={this.props.offset}