2

我在我的项目中使用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'});

当然它没有用。我用谷歌搜索，但我没有找到任何东西。你可以帮帮我吗？

4

2 回答 2

3

正如@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>

小提琴演示

于 2014-08-27T06:56:31.460 回答
2

我检查了醉醺醺的源代码，如果不更改原始代码是不可能的:)

可以在功能中show进行更改enter。在我看来，您应该创建方法showN，女巫将在您的元素上方显示文本（硬编码在它的北位置），并且类比showS. 在enter方法中，只需调用两者即可。

于 2014-08-27T06:44:32.417 回答