3

I have been filtering my way through jQuery tooltip plugins and have found tipsy. It is used by GitHub, that was what I based most of my decision on. I really like it and it is really easy to use.

I am having a problem with it though. I need the tooltip to fade in on focus, not hover. It currently works but only on hover. Here is my current code:

$('input.tip').tipsy({trigger: 'focus', gravity: 'w', fade: true});

With or without trigger: 'hover', makes no difference. I read the docs thoroughly so it is correct code.

It is not to do with the HTML/CSS, I know that for a fact. Because it already works, just not on focus.

I am using jQuery v1.4.4.

Any suggestions would be much appreciated, thanks.

Resource: http://onehackoranother.com/projects/jquery/tipsy/

Olical
  • 39,703
  • 12
  • 54
  • 77

3 Answers3

2

The plugin works for me in a simple test case based on the code you provide. Are you sure there is nothing in the additional code of your page that could be causing this to go wrong?

My simple test case pulls in the tipsy plugin from github. jsfiddle.net adds some extra stuff, but the important bits can be reduced to the following HTML which works when I test it:

<!DOCTYPE html> 
<html> 
<head> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> 
  <script type='text/javascript' src="https://github.com/jaz303/tipsy/raw/fa497c144ad7d14126a808f4c18a9ba22f2df70f/src/javascripts/jquery.tipsy.js"></script> 
  <script type='text/javascript'> 
  $(function(){
      $('input.focustip').tipsy({trigger: 'focus', gravity: 'w', fade: true});
      $('input.hovertip').tipsy({trigger: 'hover', gravity: 'w', fade: true});
  });
  </script> 
</head> 
<body> 
  <p>Test case for <a href="http://stackoverflow.com/q/4258519/445073">stackoverflow question</a>.</p> 
<p>Focus tip: <input class="focustip" title="focus"></input></p> 
<p>Hover tip: <input class="hovertip" title="hover"></input></p> 
</body> 
</html>

I tested in Firefox 3.6 and Chrome 8, both on Linux.

Day
  • 9,465
  • 6
  • 57
  • 93
  • Hmm, it must be down to CSS then, I am using the Blueprint CSS framework so that might be messing it up. I know it messes with the calender plug-in. Thanks for giving it a go though, at least I know it's not the JS now. – Olical Nov 23 '10 at 19:33
1

I just had the same problem. And I'm also using Blueprint's CSS framework. Although it might very well have something to do with it, the core difference here is the version that Day was using: he was importing version 1.0.0a from GitHub, whereas we were (I was) using version 0.1.7.

Hooking up Day's example to Tipsy's v0.1.7 causes the same problem.

The new version did the trick for me.

Adrian van Vliet
  • 1,411
  • 1
  • 12
  • 17
  • An old question but a great answer, well done for working it out. I have since moved on to 960 but I hope this helps a lot of people. – Olical Jul 26 '11 at 07:45
0

You probably haven't entered TITLE for the tag.

Eran
  • 387,369
  • 54
  • 702
  • 768
Nemanja
  • 588
  • 2
  • 6
  • 16