jQuery tipsy plugin. On focus trigger not working

2019-07-05 07:50发布

站内问答 / JavaScript
1304 3 5

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/

3条回答
老娘就宠你
2楼-- · 2019-07-05 08:38

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.

查看更多
0人赞 添加讨论(0) 举报
放我归山
3楼-- · 2019-07-05 08:38

You probably haven't entered TITLE for the tag.

查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
4楼-- · 2019-07-05 08:53

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)