jquery tooltip with links on it

2019-08-24 04:39发布

站内问答 / jQuery
1970 2 5

I wanted a jquery plugin which can support links on the tooltip. I couldnt found one.

2条回答
迷人小祖宗
2楼-- · 2019-08-24 05:00

BeautyTips supports HTML content (including links) within tooltips:

http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Edit

BeautyTips works with HoverIntent to give time to the user to click on the tooltip link. See this example:

<html>
<head>
<script language="javascript" src="http://f.work/layout/jqueryui/js/jquery-1.3.2.min.js"></script> 
<script language="javascript" src="http://f.work/layout/js/beautytips/other_libs/jquery.hoverIntent.minified.js" charset="utf-8"></script> 
<script language="javascript" src="http://f.work/layout/js/beautytips/other_libs/bgiframe_2.1.1/jquery.bgiframe.min.js" charset="utf-8"></script> 
<!--[if IE]><script src="http://f.work/layout/js/beautytips/other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script><![endif]--> 
<script language="javascript" src="http://f.work/layout/js/beautytips/jquery.bt.js" charset="utf-8"></script> 
<script src="http://f.work/layout/js/beautytips/other_libs/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body>
<img src="/layout/images/logo.png" id="example3" />

<script>

$('#example3').bt(
'<a href="javascript:alert(\'Update the image\')">Change Image</a>',
{
  cssStyles: {color: 'white', fontWeight: 'bold'},
  shrinkToFit: true,
  padding: 20,
  cornerRadius: 10,
  spikeLength: 15,
  spikeGirth: 5,
  positions: ['left', 'right', 'bottom'],
  hoverIntentOpts: {
    timeout: 5000
  }
});

</script>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
3楼-- · 2019-08-24 05:01

This one allows you to have almost anything (html/text) in the tooltip:
http://jquery.bassistance.de/tooltip/demo/

My question for you. Tooltips usually are supposed to be able to appear upon hovering a text/element and disappear when not hovering. So if you have a conventional tooltip behavior, the tooltip link is going to disappear before your mouse moves to click it.

You might have to implement something to handle that. A delayed disappearing or a tooltip positioned overlapping or just adjacent to the element. :P

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