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="https://dad-union.com/" title="お父さん連合 DAD UNION" target="_blank">お父さん連合 DAD UNION</a>


<a href="https://twitter.com/dad_union_com" title="お父さん連合 DAD UNION @dad_union_com" target="_blank">お父さん連合 DAD UNION @dad_union_com</a>

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

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