Bubble Tooltips

今天在WebAppers看到這個蠻酷的Bubble Tooltips

可以在文章的超鏈結中顯示 tooltips

Demo 擷取畫面如下：


原文章中有講述如何使用此tooltip

我整理了一下簡便使用的方法
大家只要copy paste應該就能使用了
請把以下的 html 貼到 html 的 header 中

<script src="http://web-graphics.com/mtarchive/BubbleTooltips.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>
<style type="text/css">
.tooltip{
    width: 200px; color:#000;
    font:lighter 11px/1.3 Arial,sans-serif;
    text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(http://web-graphics.com/mtarchive/bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(http://web-graphics.com/mtarchive/bt.gif) no-repeat bottom}

接下來就可以在文章中所有的超連結中加入酷炫的 Bubble Tooltip 了
在 a 的標籤中，加入title, 可以為該 tooltip 加入敘述喔~~

<a href="www.mlb.com" title="美國職棒大聯盟的官方網站">