我正在使用jQuery Tipsy在我的项目中。在社交媒体标签中,我想在顶部显示社交媒体名称,在底部显示页面共享计数,如下所示:
编辑:
我的链接是这样的:
<a class="twitter tip-n tip-s" target="_blank" href="http://twitter.com/intent/tweet?text=text&url=page" title="Twitter" rel="17 tweets"></a>
jQuery 代码部分如下:
$('.tip-n').tipsy({fade: true, gravity: 's', html: true});
$('.tip-s').tipsy({fade: true, gravity: 'n', html: true, title: 'rel'});
当然没用。我用谷歌搜索但没有找到任何东西。你能帮我吗?
最佳答案
正如@Garath 所问的plugin
不支持同一元素上有两个工具提示,但您可以采用另一种方式.. warp
<a>
元素由<span>
并在 <span>
上应用另一个工具提示元素
<span rel="17 tweets" class="tip-s">
<a class="twitter tip-n" target="_blank" href="http://twitter.com/intent/tweet?text=text&url=page" title="Twitter">ICON</a>
</span>
<script type="text/javascript">
$(function(){
$('.tip-n').tipsy({fade: true, gravity: 's', html: true});
$('.tip-s').tipsy({fade: true, gravity: 'n', html: true, title: 'rel'})
});
</script>
$(function(){
$('.tip-n').tipsy({fade: true, gravity: 's', html: true});
$('.tip-s').tipsy({fade: true, gravity: 'n', html: true, title: 'rel'})
})
<link href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<br/><br/><br/><br/>
<span rel="17 tweets" class="tip-s">
<a class="twitter tip-n" target="_blank" href="http://twitter.com/intent/tweet?text=text&url=page" title="Twitter">ICON</a>
</span>
关于jquery同时喝醉两个提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25520252/