2

我目前正在研究我的分享按钮，我试图让它们像 YouTube 上的分享按钮一样，当a:hovered一个span元素出现时带有文本“Facebook/Twitter/RSS”等。

span 元素的宽度应该是自动的，因为“Facebook”和“RSS”包含不同数量的字母，我不想设置固定宽度。

我希望 span 元素出现在其当前元素的“中间”，请查看youtube 分享按钮以获取提示。

我已经走了这么远，请参阅：http: //jsfiddle.net/Kz2n2/

4

2 回答 2

0

使用jQuery UI Tooltip，您可以为您的社交图标制作工具提示。

查看以下示例，这是实现的 jQuery UI 工具提示。

$('.tooltip').tooltip();

>`上的标题标签<a href='#'用作工具提示的文本。

<a href="#.php" class="tooltip" title="RSS">#<span>RSS.</span></a>
于 2014-01-28T11:56:46.307 回答
0

尝试这个：

<a href="#" title="share this" class="tooltip"><span title="share">share</span></a>

CSS：

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100%;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

工作jsfiddle： 演示

于 2014-01-28T11:56:20.077 回答