Browse Source

enhance popover behaviour

faster show/hide, no hide when hovering over the popover
Felix Niklas 10 years ago
parent
commit
1a67de73cf

+ 8 - 4
app/assets/javascripts/app/controllers/_application_controller.js.coffee

@@ -233,7 +233,8 @@ class App.Controller extends Spine.Controller
       trigger:    'hover'
       container:  'body'
       html:       true
-      delay:      { show: 400, hide: 800 }
+      animation:  false
+      delay:      100
       placement:  position
       title: ->
         ticket_id = $(@).data('id')
@@ -270,7 +271,8 @@ class App.Controller extends Spine.Controller
       trigger:    'hover'
       container:  'body'
       html:       true
-      delay:      { show: 400, hide: 800 }
+      animation:  false
+      delay:      100
       placement:  "auto #{position}"
       title: ->
         user_id = $(@).data('id')
@@ -326,7 +328,8 @@ class App.Controller extends Spine.Controller
       trigger:    'hover'
       container:  'body'
       html:       true
-      delay:      { show: 400, hide: 800 }
+      animation:  false
+      delay:      100
       placement:  "auto #{position}"
       title: ->
         organization_id = $(@).data('id')
@@ -379,7 +382,8 @@ class App.Controller extends Spine.Controller
         trigger:    'hover'
         container:  'body'
         html:       true
-        delay:      { show: 500, hide: 5200 }
+        animation:  false
+        delay:      100
         placement:  "auto #{data.position}"
         title: ->
           $(@).find('[title="*"]').val()

+ 23 - 0
app/assets/javascripts/app/lib/bootstrap/popover-enhance.js

@@ -0,0 +1,23 @@
+/* from here http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/ */
+
+var originalLeave = $.fn.popover.Constructor.prototype.leave;
+$.fn.popover.Constructor.prototype.leave = function(obj){
+  var self = obj instanceof this.constructor ?
+    obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
+  var container, timeout;
+
+  originalLeave.call(this, obj);
+
+  if(obj.currentTarget) {
+    container = $('body .popover');
+    timeout = self.timeout;
+    container.one('mouseenter', function(){
+      //We entered the actual popover – call off the dogs
+      clearTimeout(timeout);
+      //Let's monitor popover content instead
+      container.one('mouseleave', function(){
+        $.fn.popover.Constructor.prototype.leave.call(self, self);
+      });
+    })
+  }
+};

+ 1 - 0
app/assets/javascripts/application.js

@@ -25,6 +25,7 @@
 //= require ./app/lib/bootstrap/dropdown.js
 //= require ./app/lib/bootstrap/tooltip.js
 //= require ./app/lib/bootstrap/popover.js
+//= require ./app/lib/bootstrap/popover-enhance.js
 //= require ./app/lib/bootstrap/modal.js
 //= require ./app/lib/bootstrap/tab.js
 //= require ./app/lib/bootstrap/transition.js