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/
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.