Tooltips被用在超链接上给用户提供一些额外信息,在每一个网站上都能看到它的身影。你可以发挥想象把它们做的更漂亮一些,今天我们就用Html5和css3来做一些非常酷的Tooltips效果。
这组非常酷炫的tooltip工具提示效果中共有9种不同的效果。来看看"shape"效果的实现方法。
只需要一个空的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样式》