Tooltip and popover: accept DOM nodes and more

Accept DOM nodes and jQuery nodes as the tooltip title:

* For `html` tooltips, the title node is moved unless it is already in the
  tooltip, avoiding `.empty().append(...)` on subsequent shows.

* For plain text tooltips, the title node's text is copied into the
  tooltip.

Popover title and content are handled likewise.

js/popover.js

@@ -42,13 +42,9 @@
 
   Popover.prototype.setContent = function () {
     var $tip = this.tip()
-    var title   = this.getTitle()
-    var content = this.getContent()
 
-    $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
-    $tip.find('.popover-content').children().detach().end()[ // we use append for html objects to maintain js events
-      this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
-    ](content)
+    this.setElementContent($tip.find('.popover-title'), this.getTitle())
+    this.setElementContent($tip.find('.popover-content'), this.getContent())
 
     $tip.removeClass('fade top bottom left right in')
 

js/tests/unit/popover.js

@@ -84,6 +84,41 @@ $(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 = $('<i>¯\\_(ツ)_/¯</i>').get(0)
+    var $popover = $('<a href="#" rel="tooltip"/>')
+      .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 <I>...</I>
+    assert.strictEqual($('.popover .popover-content').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', '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 = $('<i>¯\\_(ツ)_/¯</i>').get(0)
+    var $popover = $('<a href="#" rel="tooltip"/>')
+      .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 = $('<div/>').html('loves writing tests （╯°□°）╯︵ ┻━┻')
@@ -98,14 +133,14 @@ $(function () {
 
     $popover.bootstrapPopover('show')
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
+    assert.strictEqual($('.popover .popover-content').html(), $div.html(), 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
     assert.strictEqual($('.popover').length, 0, 'popover was removed')
 
     $popover.bootstrapPopover('show')
     assert.notEqual($('.popover').length, 0, 'popover was inserted')
-    assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
+    assert.strictEqual($('.popover .popover-content').html(), $div.html(), 'content correctly inserted')
 
     $popover.bootstrapPopover('hide')
     assert.strictEqual($('.popover').length, 0, 'popover was removed')

js/tests/unit/tooltip.js

@@ -114,6 +114,34 @@ $(function () {
     assert.strictEqual($('.tooltip').length, 0, 'tooltip removed')
   })
 
+  QUnit.test('should allow DOMElement title (html: false)', function (assert) {
+    assert.expect(3)
+    var title = document.createTextNode('<3 writing tests')
+    var $tooltip = $('<a href="#" rel="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 = $('<a href="#" rel="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 = $('<a href="#" rel="tooltip" title="Another tooltip"/>')

js/tooltip.js

@@ -304,12 +304,25 @@
 
   Tooltip.prototype.setContent = function () {
     var $tip  = this.tip()
-    var title = this.getTitle()
 
-    $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
+    this.setElementContent($tip.find('.tooltip-inner'), this.getTitle())
     $tip.removeClass('fade in top bottom left right')
   }
 
+  Tooltip.prototype.setElementContent = function ($element, content) {
+    var html = this.options.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)
+    }
+  }
+
   Tooltip.prototype.hide = function (callback) {
     var that = this
     var $tip = $(this.$tip)