Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Added 'hoverStay': true|false option... #112

Open
wants to merge 3 commits into from

6 participants

@dkimbell13

Added option 'hoverStay': true|false to tipsy..

Useful if you want the tipsy to stay if your 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...

@dkimbell13 dkimbell13 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...
3a0dc18
@rauchg

+100

dkimbell13 added some commits
@dkimbell13 dkimbell13 Update src/javascripts/jquery.tipsy.js
Implemented bug fix of IE redundant title hoverovers
1ee9c02
@dkimbell13 dkimbell13 Update src/javascripts/jquery.tipsy.js
Fixed redundant IE double tip from title on 'live' tipsy's
a06a3cd
@CloCkWeRX CloCkWeRX commented on the diff
src/javascripts/jquery.tipsy.js
@@ -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)});

Whitespace is mixed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@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!

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.

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>

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

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)?

@jw2013 jw2013 referenced this pull request
Closed

Tipsy hover stay? #161

@haukurst

Thank you for this, works like a charm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 19, 2012
  1. @dkimbell13

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

    dkimbell13 authored
    …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...
Commits on Aug 23, 2012
  1. @dkimbell13

    Update src/javascripts/jquery.tipsy.js

    dkimbell13 authored
    Implemented bug fix of IE redundant title hoverovers
  2. @dkimbell13

    Update src/javascripts/jquery.tipsy.js

    dkimbell13 authored
    Fixed redundant IE double tip from title on 'live' tipsy's
This page is out of date. Refresh to see the latest.
Showing with 35 additions and 3 deletions.
  1. +35 −3 src/javascripts/jquery.tipsy.js
View
38 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)});

Whitespace is mixed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ $tip.find('.tipsy-inner').bind('mouseout',function(){$link.leave($link)});
+ }
}
},
@@ -87,11 +93,36 @@
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;
if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
- $e.attr('original-title', $e.attr('title') || '').removeAttr('title');
+ var $title = $e.attr('title');
+ $e.removeAttr('title').attr('title','').attr('original-title', $title || '');
}
},
@@ -196,7 +227,8 @@
offset: 0,
opacity: 0.8,
title: 'title',
- trigger: 'hover'
+ trigger: 'hover',
+ hoverStay: true
};
$.fn.tipsy.revalidate = function() {
Something went wrong with that request. Please try again.