tooltip/popover: add a customClass option (#31834)

Co-authored-by: XhmikosR <[email protected]>

Author: remeika

js/src/tooltip.js

@@ -41,6 +41,7 @@ const DefaultType = {
   container: '(string|element|boolean)',
   fallbackPlacement: '(string|array)',
   boundary: '(string|element)',
+  customClass: '(string|function)',
   sanitize: 'boolean',
   sanitizeFn: '(null|function)',
   whiteList: 'object',
@@ -70,6 +71,7 @@ const Default = {
   container: false,
   fallbackPlacement: 'flip',
   boundary: 'scrollParent',
+  customClass: '',
   sanitize: true,
   sanitizeFn: null,
   whiteList: DefaultWhitelist,
@@ -284,6 +286,7 @@ class Tooltip {
       this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
 
       $(tip).addClass(CLASS_NAME_SHOW)
+      $(tip).addClass(this._getCustomClass())
 
       // If this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
@@ -731,6 +734,10 @@ class Tooltip {
     this.config.animation = initConfigAnimation
   }
 
+  _getCustomClass() {
+    return this.element.getAttribute('data-custom-class') || this.config.customClass
+  }
+
   // Static
 
   static _jQueryInterface(config) {

js/tests/unit/popover.js

@@ -61,6 +61,19 @@ $(function () {
       .bootstrapPopover('show')
   })
 
+  QUnit.test('should render popover element with additional classes', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    $('<a href="#" title="mdo" data-content="https://twitter.com/mdo" data-custom-class="a b">@mdo</a>')
+      .appendTo('#qunit-fixture')
+      .on('shown.bs.popover', function () {
+        assert.strictEqual($('.popover').hasClass('popover fade bs-popover-right show'), true, 'has default classes')
+        assert.strictEqual($('.popover').hasClass('a b'), true, 'has custom classes')
+        done()
+      })
+      .bootstrapPopover('show')
+  })
+
   QUnit.test('should store popover instance in popover data object', function (assert) {
     assert.expect(1)
     var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover()

js/tests/unit/tooltip.js

@@ -1283,4 +1283,54 @@ $(function () {
 
     assert.strictEqual(popperConfig.placement, 'left')
   })
+
+  QUnit.test('additional classes can be applied via data attribute', function (assert) {
+    assert.expect(2)
+
+    $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip" data-custom-class="a b"/>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip()
+      .bootstrapTooltip('show')
+
+    var tooltip = $('.tooltip')
+
+    assert.strictEqual(tooltip.hasClass('a b'), true)
+    assert.strictEqual(tooltip.hasClass('tooltip fade bs-tooltip-top show'), true)
+  })
+
+  QUnit.test('additional classes can be applied via config string', function (assert) {
+    assert.expect(2)
+
+    $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip" />')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip({
+        customClass: 'a b'
+      })
+      .bootstrapTooltip('show')
+
+    var tooltip = $('.tooltip')
+
+    assert.strictEqual(tooltip.hasClass('a b'), true)
+    assert.strictEqual(tooltip.hasClass('tooltip fade bs-tooltip-top show'), true)
+  })
+
+  QUnit.test('additional classes can be applied via function', function (assert) {
+    assert.expect(2)
+
+    var getClasses = function () {
+      return 'a b'
+    }
+
+    $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip" />')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip({
+        customClass: getClasses
+      })
+      .bootstrapTooltip('show')
+
+    var tooltip = $('.tooltip')
+
+    assert.strictEqual(tooltip.hasClass('a b'), true)
+    assert.strictEqual(tooltip.hasClass('tooltip fade bs-tooltip-top show'), true)
+  })
 })

site/content/docs/4.5/components/popovers.md

@@ -269,6 +269,15 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
       <td>Allow to specify which position Popper will use on fallback. For more information refer to
       Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
     </tr>
+    <tr>
+      <td>customClass</td>
+      <td>string | function</td>
+      <td>''</td>
+      <td>
+        <p>Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add mutiple classes, separate them with spaces: <code>'a b'</code>.</p>
+        <p>You can also pass a function that should return a single string containing additional class names.</p>
+      </td>
+    </tr>
     <tr>
       <td>boundary</td>
       <td>string | element</td>

site/content/docs/4.5/components/tooltips.md

@@ -250,6 +250,15 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
       <td>Allow to specify which position Popper will use on fallback. For more information refer to
       Popper.js's <a href="https://popper.js.org/docs/v1/#modifiers..flip.behavior">behavior docs</a></td>
     </tr>
+    <tr>
+      <td>customClass</td>
+      <td>string | function</td>
+      <td>''</td>
+      <td>
+        <p>Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add mutiple classes, separate them with spaces: <code>'a b'</code>.</p>
+        <p>You can also pass a function that should return a single string containing additional class names.</p>
+      </td>
+    </tr>
     <tr>
       <td>boundary</td>
       <td>string | element</td>