Skip to content
This repository

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

Open
wants to merge 3 commits into from

5 participants

dkimbell13 Guillermo Rauch Daniel O'Connor Zhe Wang Caleb
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
Guillermo Rauch
guille commented

+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
Daniel O'Connor CloCkWeRX commented on the diff
src/javascripts/jquery.tipsy.js
@@ -77,6 +78,11 @@
77 78 } else {
78 79 $tip.css({visibility: 'visible', opacity: this.options.opacity});
79 80 }
  81 +
  82 + if (this.options.hoverStay) {
  83 + $tip.find('.tipsy-inner').bind('mouseover',function(){$link.enter($link)});
1

Whitespace is mixed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Caleb

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

Zhe Wang jw2013 referenced this pull request
Closed

Tipsy hover stay? #161

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 3 unique commits by 1 author.

Jul 19, 2012
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
Aug 23, 2012
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
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 35 additions and 3 deletions. Show diff stats Hide diff stats

  1. +35 3 src/javascripts/jquery.tipsy.js
38 src/javascripts/jquery.tipsy.js
@@ -28,7 +28,8 @@
28 28 var title = this.getTitle();
29 29 if (title && this.enabled) {
30 30 var $tip = this.tip();
31   -
  31 + var $link = this;
  32 +
32 33 $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
33 34 $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
34 35 $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
@@ -77,6 +78,11 @@
77 78 } else {
78 79 $tip.css({visibility: 'visible', opacity: this.options.opacity});
79 80 }
  81 +
  82 + if (this.options.hoverStay) {
  83 + $tip.find('.tipsy-inner').bind('mouseover',function(){$link.enter($link)});
  84 + $tip.find('.tipsy-inner').bind('mouseout',function(){$link.leave($link)});
  85 + }
80 86 }
81 87 },
82 88
@@ -87,11 +93,36 @@
87 93 this.tip().remove();
88 94 }
89 95 },
  96 +
  97 + enter: function() {
  98 + $tip = this;
  99 + this.hoverState = 'in';
  100 + if(!$tip.tip().is(":visible")){
  101 + if ($tip.options.delayIn == 0) {
  102 + $tip.show();
  103 + } else {
  104 + setTimeout(function() { if ($tip.hoverState == 'in') $tip.show(); }, $tip.options.delayIn);
  105 + }
  106 + }
  107 + },
  108 +
  109 + leave: function() {
  110 + $tip = this;
  111 + this.hoverState = 'out';
  112 + if($tip.tip().is(":visible")){
  113 + if (this.options.delayOut == 0) {
  114 + $tip.hide();
  115 + } else {
  116 + setTimeout(function() {if ($tip.hoverState == 'out') $tip.hide(); }, $tip.options.delayOut);
  117 + }
  118 + }
  119 + },
90 120
91 121 fixTitle: function() {
92 122 var $e = this.$element;
93 123 if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
94   - $e.attr('original-title', $e.attr('title') || '').removeAttr('title');
  124 + var $title = $e.attr('title');
  125 + $e.removeAttr('title').attr('title','').attr('original-title', $title || '');
95 126 }
96 127 },
97 128
@@ -196,7 +227,8 @@
196 227 offset: 0,
197 228 opacity: 0.8,
198 229 title: 'title',
199   - trigger: 'hover'
  230 + trigger: 'hover',
  231 + hoverStay: true
200 232 };
201 233
202 234 $.fn.tipsy.revalidate = function() {

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.