Tippy.js网页链接title效果

  网页前端          497 阅读          2018-04-27

Tippy.js可以为a链接设置title鼠标滑过效果,具体效果见本站文章列表的文章标题以及侧边栏随机文章,鼠标滑过的时候显示的效果。使用方法如下:

在站点头部添加如下代码:

<script src="https://cdn.bootcss.com/tippy.js/2.5.2/tippy.all.min.js"></script>
<link href="https://cdn.bootcss.com/tippy.js/2.5.2/themes/light.css" rel="stylesheet">

然后使用时候如下:

<button class="btn" title="Tippy效果展示">Text</button>

最后在站点的底部添加如下代码:

<script>
tippy('.btn', {
  allowTitleHTML: true,
  animation: 'shift-away',
  arrow: true,
  theme: 'light',
})
</script>

同时,这个title效果还支持html标签,在第二步中您可以这样写:

<button class="btn" title="

<div class='uk-padding-small uk-background-default tuts_avatar_tooltip'>
    <img src='https://secure.gravatar.com/avatar.php?gravatar_id=7889824d0396738cc5918fd826812381' alt='安朵'>
    <p class='uk-text-small uk-text-nowrap uk-margin-remove-bottom'>迷笛(共116评论)</p>
    <p class='uk-text-nowrap uk-margin-remove-bottom'>你是不是真的不爱我了?怎么还挺为难你</p>
    <p class='uk-text-meta uk-text-nowrap uk-margin-remove-bottom'>这个家伙已经一年没有留言了</p>
</div>

">Text</button>

这个效果是本站现在评论模块的效果,大家可以自己找一篇有评论的文章看一下效果。

支付宝二维码
微信二维码

扫码打赏,您说多少就多少!

感谢您的打赏,我们会更加努力的更新站点!

发表评论

  • 暂无评论,快来抢沙发!