Tooltips fires show, shown, hide, hidden events

It is re-worked from #3691.

diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index d908b0cf81384a0e110cf364c4234ba02eb1706b..2a79490b161c2a91674a1589a530d0a63a876a17 100644 (file)
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -110,8 +110,11 @@
         , actualHeight
         , placement
         , tp
+        , e
 
       if (this.hasContent() && this.enabled) {
+        this.$element.trigger(e = $.Event('show'))
+        if (e.isDefaultPrevented()) return
         $tip = this.tip()
         this.setContent()
 
@@ -152,6 +155,8 @@
           .offset(tp)
           .addClass(placement)
           .addClass('in')
+
+        this.$element.trigger('shown')
       }
     }
 
@@ -166,6 +171,10 @@
   , hide: function () {
       var that = this
         , $tip = this.tip()
+        , e
+
+      this.$element.trigger(e = $.Event('hide'))
+      if (e.isDefaultPrevented()) return
 
       $tip.removeClass('in')
 
@@ -184,6 +193,8 @@
         removeWithAnimation() :
         $tip.detach()
 
+      this.$element.trigger('hidden')
+
       return this
     }
 

diff --git a/js/tests/unit/bootstrap-tooltip.js b/js/tests/unit/bootstrap-tooltip.js
index c44f75757a161fd951f21f517cd745f91da04706..1370ef381ee0eaeb985de22fe8db7bcb5e86de07 100644 (file)
--- a/js/tests/unit/bootstrap-tooltip.js
+++ b/js/tests/unit/bootstrap-tooltip.js
@@ -66,6 +66,83 @@ $(function () {
         ok(!$(".tooltip").length, 'tooltip removed')
       })
 
+      test("should fire show event", function () {
+        stop()
+        var tooltip = $('<div title="tooltip title"></div>')
+          .bind("show", function() {
+            ok(true, "show was called")
+            start()
+          })
+          .tooltip('show')
+      })
+
+      test("should fire shown event", function () {
+        stop()
+        var tooltip = $('<div title="tooltip title"></div>')
+          .bind("shown", function() {
+            ok(true, "shown was called")
+            start()
+          })
+          .tooltip('show')
+      })
+
+      test("should not fire shown event when default prevented", function () {
+        stop()
+        var tooltip = $('<div title="tooltip title"></div>')
+          .bind("show", function(e) {
+            e.preventDefault()
+            ok(true, "show was called")
+            start()
+          })
+          .bind("shown", function() {
+            ok(false, "shown was called")
+          })
+          .tooltip('show')
+      })
+
+      test("should fire hide event", function () {
+        stop()
+        var tooltip = $('<div title="tooltip title"></div>')
+          .bind("shown", function() {
+            $(this).tooltip('hide')
+          })
+          .bind("hide", function() {
+            ok(true, "hide was called")
+            start()
+          })
+          .tooltip('show')
+      })
+
+      test("should fire hidden event", function () {
+        stop()
+        var tooltip = $('<div title="tooltip title"></div>')
+          .bind("shown", function() {
+            $(this).tooltip('hide')
+          })
+          .bind("hidden", function() {
+            ok(true, "hidden was called")
+            start()
+          })
+          .tooltip('show')
+      })
+
+      test("should not fire hidden event when default prevented", function () {
+        stop()
+        var tooltip = $('<div title="tooltip title"></div>')
+          .bind("shown", function() {
+            $(this).tooltip('hide')
+          })
+          .bind("hide", function(e) {
+            e.preventDefault()
+            ok(true, "hide was called")
+            start()
+          })
+          .bind("hidden", function() {
+            ok(false, "hidden was called")
+          })
+          .tooltip('show')
+      })
+
       test("should not show tooltip if leave event occurs before delay expires", function () {
         var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
           .appendTo('#qunit-fixture')