| title |
- string | function |
+ string | element | function |
'' |
Default title value if title attribute isn't present.
diff --git a/js/src/popover.js b/js/src/popover.js
index 99e48e64f9..b8b24a1c4c 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -34,7 +34,7 @@ const Popover = (($) => {
})
const DefaultType = $.extend({}, Tooltip.DefaultType, {
- content : '(string|function)'
+ content : '(string|element|function)'
})
const ClassName = {
@@ -113,24 +113,13 @@ const Popover = (($) => {
}
setContent() {
- let tip = this.getTipElement()
- let title = this.getTitle()
- let content = this._getContent()
- let $titleElement = $(tip).find(Selector.TITLE)
-
- if ($titleElement) {
- $titleElement[
- this.config.html ? 'html' : 'text'
- ](title)
- }
+ let $tip = $(this.getTipElement())
// we use append for html objects to maintain js events
- $(tip).find(Selector.CONTENT).children().detach().end()[
- this.config.html ?
- (typeof content === 'string' ? 'html' : 'append') : 'text'
- ](content)
+ this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
+ this.setElementContent($tip.find(Selector.CONTENT), this._getContent())
- $(tip)
+ $tip
.removeClass(ClassName.FADE)
.removeClass(ClassName.IN)
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index aa5c739457..151cd6f515 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -43,7 +43,7 @@ const Tooltip = (($) => {
const DefaultType = {
animation : 'boolean',
template : 'string',
- title : '(string|function)',
+ title : '(string|element|function)',
trigger : 'string',
delay : '(number|object)',
html : 'boolean',
@@ -356,19 +356,33 @@ const Tooltip = (($) => {
}
setContent() {
- let tip = this.getTipElement()
- let title = this.getTitle()
- let method = this.config.html ? 'html' : 'text'
+ let $tip = $(this.getTipElement())
- $(tip).find(Selector.TOOLTIP_INNER)[method](title)
+ this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
- $(tip)
+ $tip
.removeClass(ClassName.FADE)
.removeClass(ClassName.IN)
this.cleanupTether()
}
+ setElementContent($element, content) {
+ let html = this.config.html
+ if (typeof content === 'object' && (content.nodeType || content.jquery)) {
+ // content is a DOM node or a jQuery
+ if (html) {
+ if (!$(content).parent().is($element)) {
+ $element.empty().append(content)
+ }
+ } else {
+ $element.text($(content).text())
+ }
+ } else {
+ $element[html ? 'html' : 'text'](content)
+ }
+ }
+
getTitle() {
let title = this.element.getAttribute('data-original-title')
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 8347e9f034..894468695c 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -86,6 +86,42 @@ $(function () {
assert.strictEqual($('.popover').length, 0, 'popover was removed')
})
+ QUnit.test('should allow DOMElement title and content (html: true)', function (assert) {
+ assert.expect(5)
+ var title = document.createTextNode('@glebm <3 writing tests')
+ var content = $('¯\\_(ツ)_/¯').get(0)
+ var $popover = $('')
+ .appendTo('#qunit-fixture')
+ .bootstrapPopover({ html: true, title: title, content: content })
+
+ $popover.bootstrapPopover('show')
+
+ assert.notEqual($('.popover').length, 0, 'popover inserted')
+ assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted')
+ assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied')
+ // toLowerCase because IE8 will return ...
+ assert.strictEqual($('.popover .popover-content').html().toLowerCase(), '¯\\_(ツ)_/¯', 'content inserted')
+ assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied')
+ })
+
+ QUnit.test('should allow DOMElement title and content (html: false)', function (assert) {
+ assert.expect(5)
+ var title = document.createTextNode('@glebm <3 writing tests')
+ var content = $('¯\\_(ツ)_/¯').get(0)
+ var $popover = $('')
+ .appendTo('#qunit-fixture')
+ .bootstrapPopover({ title: title, content: content })
+
+ $popover.bootstrapPopover('show')
+
+ assert.notEqual($('.popover').length, 0, 'popover inserted')
+ assert.strictEqual($('.popover .popover-title').text(), '@glebm <3 writing tests', 'title inserted')
+ assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved')
+ assert.strictEqual($('.popover .popover-content').html(), '¯\\_(ツ)_/¯', 'content inserted')
+ assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
+ })
+
+
QUnit.test('should not duplicate HTML object', function (assert) {
assert.expect(6)
var $div = $('').html('loves writing tests （╯°□°）╯︵ ┻━┻')
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index f4deb29f8e..934e26b9e0 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -119,6 +119,35 @@ $(function () {
assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
})
+ QUnit.test('should allow DOMElement title (html: false)', function (assert) {
+ assert.expect(3)
+ var title = document.createTextNode('<3 writing tests')
+ var $tooltip = $('')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ title: title })
+
+ $tooltip.bootstrapTooltip('show')
+
+ assert.notEqual($('.tooltip').length, 0, 'tooltip inserted')
+ assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted')
+ assert.ok(!$.contains($('.tooltip').get(0), title), 'title node copied, not moved')
+ })
+
+ QUnit.test('should allow DOMElement title (html: true)', function (assert) {
+ assert.expect(3)
+ var title = document.createTextNode('<3 writing tests')
+ var $tooltip = $('')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ html: true, title: title })
+
+ $tooltip.bootstrapTooltip('show')
+
+ assert.notEqual($('.tooltip').length, 0, 'tooltip inserted')
+ assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted')
+ assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied')
+ })
+
+
QUnit.test('should respect custom classes', function (assert) {
assert.expect(2)
var $tooltip = $('')
|