BubbleTooltips.js:リンクタグのtitleを噴出し表示するJs



ページ内のリンクタグに設定しているtitle文字を、
マウスオーバー時に噴出し表示します。

1.JavaScriptの記述例

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

2.CSSの記述例

以下が噴出し箇所のCSSです。
調整してみて下さい。

<style type="text/css">
<!--
.tooltip{
width: 300px;
color:#FFFFFF;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;
text-align:left;
font-size:11px;
}

.tooltip span.top{
	padding:5px;
	line-height:140%;
	font-size:11px;
    background: url(bg01.png) top left repeat;
}
-->
</style>

3.HTML(リンクタグ)の記述例

<a href="http://www.blinderhidden.com/" title="BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー" target="_blank">BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー</a><br />
<br /><br />
<a href="https://twitter.com/BLINDERHIDDEN" title="BLINDERHIDDEN (BLINDERHIDDEN) on Twitter" target="_blank">BLINDERHIDDEN (BLINDERHIDDEN) on Twitter</a>

BubbleTooltips.js:リンクタグのtitleを噴出し表示するデモページ

ソース元はhttp://web-graphics.comですが、
ページが無くなっている様です。

マウスカーソルをリンクにもっていた時の一工夫としては
何だか良さげな気がします。