リンクタグのtitleテキストをマウスオーバーで吹き出し表示【BubbleTooltips.js】｜DAD UNION

BubbleTooltips.jsを使ってページ内のリンクタグに設定しているtitle属性のテキストをマウスオーバー時に吹き出し表示する方法をご紹介します。

Contents

BubbleTooltips.jsを使ってページ内のリンクタグに設定しているtitle属性のテキストをマウスオーバー時に吹き出し表示するJavaScriptの記述
リンクタグのtitleテキストをマウスオーバーで吹き出し表示するCSSの記述
リンクタグのtitleテキストをマウスオーバーで吹き出し表示するHTML（リンクタグ）の記述
BubbleTooltips.js：リンクタグのtitleを噴出し表示するデモページ

BubbleTooltips.jsを使ってページ内のリンクタグに設定しているtitle属性のテキストをマウスオーバー時に吹き出し表示するJavaScriptの記述

※BubbleTooltips.jsファイルを読み込みます。ページ読込（window.onload）後、enableTooltips()を記述するだけです。

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

リンクタグのtitleテキストをマウスオーバーで吹き出し表示するCSSの記述

※titleテキストを吹き出し表示するエリア（.tooltip）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
.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>

リンクタグのtitleテキストをマウスオーバーで吹き出し表示するHTML（リンクタグ）の記述

※リンク（a）タグのtitle属性に吹き出し表示したいテキストを設定するだけです。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>以下リンクタグに設定しているtitleの文字がマウスオーバー時に噴出し表示されます。</h1>

<a href="https://dad-union.com/" title="お父さん連合 DAD UNION" target="_blank">お父さん連合 DAD UNION</a><br />
<br /><br />
<a href="https://twitter.com/dad_union_com" title="お父さん連合 DAD UNION @dad_union_com" target="_blank">お父さん連合 DAD UNION @dad_union_com</a>
</div><!--/idWrap-->

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

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

　
マウスカーソルをリンクにもっていた時の一工夫の演出としては良さげですね。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。