Allow multiple delegated tooltip selectors on a node

Fixes #14167.
Closes #14189 by merging it.

diff --git a/js/popover.js b/js/popover.js
index 87b8d12de6a89c9603bc86cbf226cc9ce9a6bcc2..c69be715fd46e58f503adc811af0a10879a7a029 100644 (file)
--- a/js/popover.js
+++ b/js/popover.js
@@ -86,12 +86,18 @@
 
   function Plugin(option) {
     return this.each(function () {
-      var $this   = $(this)
-      var data    = $this.data('bs.popover')
-      var options = typeof option == 'object' && option
+      var $this    = $(this)
+      var data     = $this.data('bs.popover')
+      var options  = typeof option == 'object' && option
+      var selector = options && options.selector
 
       if (!data && option == 'destroy') return
-      if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
+      if (selector) {
+        if (!data) $this.data('bs.popover', (data = {}))
+        if (!data[selector]) data[selector] = new Popover(this, options)
+      } else {
+        if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
+      }
       if (typeof option == 'string') data[option]()
     })
   }

diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 827ebb5a525f3df21d54189691fc0f166410a73b..466ebace26d5141298886eeb41e20285c69ff6ca 100644 (file)
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -173,4 +173,48 @@ $(function () {
     ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
   })
 
+  test('should render popover element using delegated selector', function () {
+    var $div = $('<div><a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a></div>')
+      .appendTo('#qunit-fixture')
+      .bootstrapPopover({
+        selector: 'a',
+        trigger: 'click'
+      })
+
+    $div.find('a').click()
+    notEqual($('.popover').length, 0, 'popover was inserted')
+
+    $div.find('a').click()
+    equal($('.popover').length, 0, 'popover was removed')
+  })
+
+  test('should render popover elements using different delegated selectors on the same node', function () {
+    var popoverHTML = '<div>'
+        + '<a href="#" class="first" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>'
+        + '<a href="#" class="second" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>'
+        + '</div>'
+
+    var $div = $(popoverHTML)
+      .appendTo('#qunit-fixture')
+      .bootstrapPopover({
+        selector: 'a.first',
+        trigger: 'click'
+      })
+      .bootstrapPopover({
+        selector: 'a.second',
+        trigger: 'click'
+      })
+
+    $div.find('a.first').click()
+    notEqual($('.popover').length, 0, 'first popover was inserted')
+
+    $div.find('a.first').click()
+    equal($('.popover').length, 0, 'first popover removed')
+
+    $div.find('a.second').click()
+    notEqual($('.popover').length, 0, 'second popover was inserted')
+
+    $div.find('a.second').click()
+    equal($('.popover').length, 0, 'second popover removed')
+  })
 })

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index d05be3d554bd6308fed7f092a481c72bb1d3350c..351dd61cb51f6ce4816fe4aa63ff3a00b124b9c8 100644 (file)
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -235,6 +235,37 @@ $(function () {
     equal($('.tooltip').length, 0, 'tooltip was removed from dom')
   })
 
+  test('should show tooltips with different delegate selectors on the same node on click', function () {
+    var tooltipHTML = '<div>'
+        + '<a href="#" class="first" rel="tooltip" title="First delegated tooltip"/>'
+        + '<a href="#" class="second" rel="tooltip" title="Second delegated tooltip"/>'
+        + '</div>'
+
+    var $div = $(tooltipHTML)
+      .append()
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip({
+        selector: 'a.first[rel="tooltip"]',
+        trigger: 'click'
+      })
+      .bootstrapTooltip({
+        selector: 'a.second[rel="tooltip"]',
+        trigger: 'click'
+      })
+
+    $div.find('a.first').click()
+    ok($('.tooltip').is('.fade.in'), 'first tooltip is faded in')
+
+    $div.find('a.first').click()
+    equal($('.tooltip').length, 0, 'first tooltip was removed from dom')
+
+    $div.find('a.second').click()
+    ok($('.tooltip').is('.fade.in'), 'second tooltip is faded in')
+
+    $div.find('a.second').click()
+    equal($('.tooltip').length, 0, 'second tooltip was removed from dom')
+  })
+
   test('should show tooltip when toggle is called', function () {
     $('<a href="#" rel="tooltip" title="tooltip on toggle"/>')
       .appendTo('#qunit-fixture')

diff --git a/js/tooltip.js b/js/tooltip.js
index 944586a2d07d0391bbb68ee59a0bea2c8d310c8f..08d22971fd941bdbe1adf532f4c0a068b7a3a907 100644 (file)
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -442,12 +442,18 @@
 
   function Plugin(option) {
     return this.each(function () {
-      var $this   = $(this)
-      var data    = $this.data('bs.tooltip')
-      var options = typeof option == 'object' && option
+      var $this    = $(this)
+      var data     = $this.data('bs.tooltip')
+      var options  = typeof option == 'object' && option
+      var selector = options && options.selector
 
       if (!data && option == 'destroy') return
-      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
+      if (selector) {
+        if (!data) $this.data('bs.tooltip', (data = {}))
+        if (!data[selector]) data[selector] = new Tooltip(this, options)
+      } else {
+        if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
+      }
       if (typeof option == 'string') data[option]()
     })
   }