Skip to content
Browse files

Added 'hoverStay':true|false option... Useful for when you want the t…

…ipsy to stay if you mouse is hovering above it. e.g. when you have 'html' set to true and you have embedded a link in the text of your tipsy...
  • Loading branch information...
1 parent 8cd3dbc commit 3a0dc1880854fd17e7795cf749bce1d1f98024d2 @dkimbell13 committed Jul 19, 2012
Showing with 33 additions and 2 deletions.
  1. +33 −2 src/javascripts/jquery.tipsy.js
View
35 src/javascripts/jquery.tipsy.js
@@ -28,7 +28,8 @@
var title = this.getTitle();
if (title && this.enabled) {
var $tip = this.tip();
-
+ var $link = this;
+
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
@@ -77,6 +78,11 @@
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
+
+ if (this.options.hoverStay) {
+ $tip.find('.tipsy-inner').bind('mouseover',function(){$link.enter($link)});
+ $tip.find('.tipsy-inner').bind('mouseout',function(){$link.leave($link)});
+ }
}
},
@@ -87,6 +93,30 @@
this.tip().remove();
}
},
+
+ enter: function() {
+ $tip = this;
+ this.hoverState = 'in';
+ if(!$tip.tip().is(":visible")){
+ if ($tip.options.delayIn == 0) {
+ $tip.show();
+ } else {
+ setTimeout(function() { if ($tip.hoverState == 'in') $tip.show(); }, $tip.options.delayIn);
+ }
+ }
+ },
+
+ leave: function() {
+ $tip = this;
+ this.hoverState = 'out';
+ if($tip.tip().is(":visible")){
+ if (this.options.delayOut == 0) {
+ $tip.hide();
+ } else {
+ setTimeout(function() {if ($tip.hoverState == 'out') $tip.hide(); }, $tip.options.delayOut);
+ }
+ }
+ },
fixTitle: function() {
var $e = this.$element;
@@ -196,7 +226,8 @@
offset: 0,
opacity: 0.8,
title: 'title',
- trigger: 'hover'
+ trigger: 'hover',
+ hoverStay: true
};
$.fn.tipsy.revalidate = function() {

7 comments on commit 3a0dc18

@MuffinTheMan

I cloned your version to try out your hoverStay feature, and I'm probably doing something pretty dumb, because the tooltip vanishes immediately after my mouse leaves the element I'm hovering over (as I attempt to reach the tooltip in order to hover over it). This is the gist of what I'm doing:

`d3.select("#" + tileID)
    .append("div")
        .attr("class","avatar")
        .attr("id","avatar_" + tileID)
        .attr("title",function(d)
        {
            $(this).tipsy({gravity: 'n'});
            return "test";
        });`

Hopefully, my use of d3.js above is something you are familiar enough with to see what I'm trying to achieve. Thanks!

@dkimbell13
Owner
@MuffinTheMan

Thanks, I tried it; but I'm still running into the same problem. However, I just tried using it in a different context, and it seemed to work. I'll mess around with it a bit more to see where I was going wrong with my other code.

@MuffinTheMan

Scratch that. I think it was an illusion that I actually had it working. I tried going more simple--still no success :/ The tipsy tooltip appears fine when I hover over the span, but it disappears when I try to hover over the tip. Sad day.

<span id='test2' title='tester'>hello yo</span>

<script>
    $('#test2').tipsy({gravity: 'n', hoverStay:true, html:true});
</script>
@dkimbell13
Owner
@MuffinTheMan

I quick made a page with "Hello world!" (try hovering over it and the resulting tip) Thanks for looking into it.

Can easily access files here: http://cse.unl.edu/~clarsen/public/tipsy_test/

Can see the simple page here: http://cse.unl.edu/~clarsen/public/tipsy_test/hoverStay.html

@jw2013
jw2013 commented on 3a0dc18 Jun 27, 2013

Muffin,
Looks like it's still having the same problem with the url you provided (http://cse.unl.edu/~clarsen/public/tipsy_test/hoverStay.html)?

Please sign in to comment.
Something went wrong with that request. Please try again.