feat(Tooltip): allow additional arrow classNames (#1119)

Fixes #1117
reactstrap · Jul 10, 2018 · 9ffa55f · 9ffa55f
1 parent 2d75db0
commit 9ffa55f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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,14 +138,18 @@ class PopperContent extends React.Component {
       offset,
       fallbackPlacement,
       placementPrefix,
+      arrowClassName: _arrowClassName,
       hideArrow,
       className,
       tag,
       container,
       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
@@ -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}