feat: set custom selectors for tooltip (#644)

docs/_includes/tooltip-documentation.md

@@ -32,6 +32,9 @@ Create a new Tooltip.js instance
 | options.html | <code>Boolean</code> | <code>false</code> | Insert HTML into the tooltip. If false, the content will inserted with `textContent`. |
 | options.placement | <code>String</code> \| <code>PlacementFunction</code> | <code>&#x27;top&#x27;</code> | One of the allowed placements, or a function returning one of them. |
 | [options.template] | <code>String</code> | <code>&#x27;&lt;div class=&quot;tooltip&quot; role=&quot;tooltip&quot;&gt;&lt;div class=&quot;tooltip-arrow&quot;&gt;&lt;/div&gt;&lt;div class=&quot;tooltip-inner&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;</code> | Base HTML to used when creating the tooltip.      The tooltip's `title` will be injected into the `.tooltip-inner` or `.tooltip__inner`.      `.tooltip-arrow` or `.tooltip__arrow` will become the tooltip's arrow.      The outermost wrapper element should have the `.tooltip` class. |
+| options.arrowSelector | <code>String</code>  | <code>'.tooltip-arrow, .tooltip__arrow'</code> | selector used to locate the DOM inner element in the tooltip (useful if you pass a custom <code>options.template</code>) |
+| options.innerSelector | <code>String</code>  | <code>'.tooltip-inner, .tooltip__inner'</code> | selector used to locate the DOM arrow element in the tooltip (useful if you pass a custom <code>options.template</code>) |
+
 | options.title | <code>String</code> \| <code>HTMLElement</code> \| <code>TitleFunction</code> | <code>&#x27;&#x27;</code> | Default title value if `title` attribute isn't present. |
 | [options.trigger] | <code>String</code> | <code>&#x27;hover focus&#x27;</code> | How tooltip is triggered - click, hover, focus, manual.      You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. |
 | options.boundariesElement | <code>String</code> \| <code>HTMLElement</code> |  | The element used as boundaries for the tooltip. For more information refer to Popper.js'      [boundariesElement docs](https://popper.js.org/popper-documentation.html) |

packages/tooltip/src/index.js

@@ -11,6 +11,8 @@ const DEFAULT_OPTIONS = {
     '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
   trigger: 'hover focus',
   offset: 0,
+  arrowSelector: '.tooltip-arrow, .tooltip__arrow',
+  innerSelector: '.tooltip-inner, .tooltip__inner',
 };
 
 export default class Tooltip {
@@ -22,6 +24,8 @@ export default class Tooltip {
    * @param {String|PlacementFunction} options.placement=top
    *      Placement of the popper accepted values: `top(-start, -end), right(-start, -end), bottom(-start, -end),
    *      left(-start, -end)`
+   * @param {String} options.arrowSelector='.tooltip-arrow, .tooltip__arrow' - className used to locate the DOM arrow element in the tooltip.
+   * @param {String} options.innerSelector='.tooltip-inner, .tooltip__inner' - className used to locate the DOM inner element in the tooltip.
    * @param {HTMLElement|String|false} options.container=false - Append the tooltip to a specific element.
    * @param {Number|Object} options.delay=0
    *      Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type.
@@ -122,12 +126,6 @@ export default class Tooltip {
    */
   updateTitleContent = (title) => this._updateTitleContent(title);
 
-  //
-  // Defaults
-  //
-  arrowSelector = '.tooltip-arrow, .tooltip__arrow';
-  innerSelector = '.tooltip-inner, .tooltip__inner';
-
   //
   // Private methods
   //
@@ -159,7 +157,7 @@ export default class Tooltip {
     tooltipNode.setAttribute('aria-hidden', 'false');
 
     // add title to tooltip
-    const titleNode = tooltipGenerator.querySelector(this.innerSelector);
+    const titleNode = tooltipGenerator.querySelector(this.options.innerSelector);
     this._addTitleContent(reference, title, allowHtml, titleNode);
 
     // return the generated tooltip node
@@ -230,7 +228,7 @@ export default class Tooltip {
     this._popperOptions.modifiers = {
       ...this._popperOptions.modifiers,
       arrow: {
-        element: this.arrowSelector,
+        element: this.options.arrowSelector,
       },
       offset: {
         offset: options.offset,
@@ -425,15 +423,15 @@ export default class Tooltip {
 
     return false;
   };
-  
+
   _updateTitleContent(title) {
     if(typeof this._tooltipNode === 'undefined') {
       if(typeof this.options.title !== 'undefined') {
         this.options.title = title;
       }
       return;
     }
-    const titleNode = this._tooltipNode.parentNode.querySelector(this.innerSelector);    
+    const titleNode = this._tooltipNode.parentNode.querySelector(this.options.innerSelector);
     this._clearTitleContent(titleNode, this.options.html, this.reference.getAttribute('title') || this.options.title)
     this._addTitleContent(this.reference, title, this.options.html, titleNode);
     this.options.title = title;