9种html5+css3炫酷tooltip工具提示插件效果

当前位置:主页 > Html5库 > HTML5动画 > 9种html5+css3炫酷tooltip工具提示插件效果
9种html5+css3炫酷tooltip工具提示插件效果
分享:

    插件介绍

    这个炫酷tooltip工具提示插件将带您离开黄底黑字的html tooltip原始时代。该tooltip插件共9种效果,使用html5 svg和css3 transform属性完成。这个工具提示效果带图片带动画,效果一流。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-03
    阅读:

简要教程

Tooltips被用在超链接上给用户提供一些额外信息,在每一个网站上都能看到它的身影。你可以发挥想象把它们做的更漂亮一些,今天我们就用Html5和css3来做一些非常酷的Tooltips效果。

这组非常酷炫的tooltip工具提示效果中共有9种不同的效果。来看看"shape"效果的实现方法。

HTML

只需要一个空的div,然后在运行时用js往里面插入需要的节点。

<blockquote>
    <p>A man of my <span class="tooltip tooltip-turnright"><span class="tooltip-item">spiritual</span><span class="tooltip-content"><strong>[spir·it·u·al]</strong> affecting the human spirit or soul as opposed to material or physical things</span></span> intensity does not eat <span class="tooltip tooltip-turnleft"><span class="tooltip-item">corpses</span><span class="tooltip-content"><strong>[corpse]</strong> dead body, body, carcass, skeleton, remains, mortal remains, rotten bacon</span></span>.</p>
    <footer><span class="tooltip tooltip-turnright"><span class="tooltip-item">George Bernard Shaw</span><span class="tooltip-content"><strong>George Bernard Shaw</strong> (26 July 1856 – 2 November 1950) was an Irish playwright and a co-founder of the London School of Economics.</span></span></footer>
</blockquote>
                

更详细的教程请参看《用html5和css3制作神奇的Tooltip样式