Accept elements as the tooltip / popover content

When a DOM node is passed to an HTML tooltip, the `title` node is only
moved if it is not already in the tooltip. Otherwise, `empty()` is used
instead of `detach()` before appending the `title` to avoid memory
leaks. If a DOM node is passed to a plain text tooltip, its text is
copied via jQuery `.text()`.

Replaces `.detach()` with `.empty()`, as `.detach()` is almost never
useful but instead leaks memory. The difference between `empty` and
`detach` is that the latter keeps all the attached jQuery events/data.
However, since we do not return the previous children, the user would
have to keep these themselves, thus they can `detach()` if necessary.

This is a port of https://github.com/twbs/bootstrap/pull/14552 to v4.

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 = $('<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 （╯°□°）╯︵ ┻━┻')

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 = $('<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"/>')