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

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 4b58f31565f2efd4d84f712c48980fb80f22546c..a7703403852f75a35977cdcd2100ad2e222d10c2 100644 (file)
--- a/js/src/tooltip.js
+++ b/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) {

diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index a5981e45ffc0fa584500d25092c354be011e1e6f..102f37f8dff8990c560404bb5173525bbf4fc770 100644 (file)
--- a/js/tests/unit/popover.js
+++ b/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()

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 4f55007c71d675ed5fd8275e23e173d9465feb07..b6a40b87369ff90f58753de339dca9c93037642d 100644 (file)
--- a/js/tests/unit/tooltip.js
+++ b/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)
+  })
 })

diff --git a/site/content/docs/4.5/components/popovers.md b/site/content/docs/4.5/components/popovers.md
index e06a8176957ddbafe26e5566022aee3af4195132..a44bbf8c93374bd2fb6448641e8f709f71e29316 100644 (file)
--- a/site/content/docs/4.5/components/popovers.md
+++ b/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>

diff --git a/site/content/docs/4.5/components/tooltips.md b/site/content/docs/4.5/components/tooltips.md
index c297eea16f8a97e6c5b386a3506e16585a1e3d06..fdb926bcec4fdaa32234db2ece9d873dd8217210 100644 (file)
--- a/site/content/docs/4.5/components/tooltips.md
+++ b/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>