diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 4b58f31565..a770340385 100644 --- 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 a5981e45ff..102f37f8df 100644 --- 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() + $('@mdo') + .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 = $('@mdo').bootstrapPopover() diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 4f55007c71..b6a40b8736 100644 --- 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) + + $('') + .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) + + $('') + .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' + } + + $('') + .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 e06a817695..a44bbf8c93 100644 --- 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
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: 'a b'
.
You can also pass a function that should return a single string containing additional class names.
+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: 'a b'
.
You can also pass a function that should return a single string containing additional class names.
+