jQuery tipsy plugin. On focus trigger not working

问题

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/

回答1:

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.

回答2:

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.