JavaScript

リンクのタイトルをマウスオーバーで魅力的に表示する方法：BubbleTooltips.jsの使い方ガイド

  /

ウェブサイトやブログを魅力的に見せるための小さな工夫は、訪問者の注目を引き、彼らの滞在時間を延ばす重要な要素です。特に、技術ブログや教育コンテンツを提供している場合、読者が内容を理解しやすくするための視覚的ヒントは大いに役立ちます。
この記事では、JavaScriptライブラリ「BubbleTooltips.js」を使って、リンクにマウスオーバーした際に表示される吹き出しツールチップを簡単に実装する方法を紹介します。これにより、エンジニアやウェブ開発に興味がある方だけでなく、初心者の方々にもウェブページの操作がより直感的にわかりやすくなります。

Contents

BubbleTooltips.jsとは

BubbleTooltips.jsは、ウェブページ内のリンクタグ（aタグ）に設定されたtitle属性のテキストを、マウスオーバー時に美しい吹き出し形式で表示するためのJavaScriptライブラリです。このライブラリを使用することで、ウェブサイトのユーザビリティを向上させ、訪問者にとってよりインタラクティブな体験を提供することができます。

BubbleTooltips.jsライブラリの読み込み、JavaScriptの記述

まず、BubbleTooltips.jsファイルを読み込みます。
次に、ウェブページが読み込まれた後にBubbleTooltips.jsが動作するように、ページ読込（window.onload）後、enableTooltips()を記述するだけです。

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

　
このコードにより、ページの全てのリンクに対して、title属性の内容を吹き出しで表示する機能が有効になります。

CSSによるスタイリング

BubbleTooltips.jsでは、吹き出し表示されるテキストのスタイリングをカスタマイズすることができます。以下はその一例です。
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>

HTMLでのリンクタグの設定

吹き出しで表示したいテキストをリンクのtitle属性に設定します。
リンク（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-->

　
このように設定すると、上記リンクにマウスカーソルを合わせた際に「お父さん連合 DAD UNION」や「お父さん連合 DAD UNION @dad_union_com」というテキストが吹き出しで表示されます。

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

実装の参考として、BubbleTooltips.jsを使用したデモページが以下のリンクから確認できます。

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

　
このデモを通して、具体的な動作や見た目の確認を行い、自サイトに適用する際のイメージを膨らませることができます。

まとめ

BubbleTooltips.jsを使用することで、リンクタグに設定したtitle属性のテキストを吹き出し表示させることが簡単にできます。この小さな工夫が、ウェブサイトやブログのユーザビリティを向上させ、訪問者にとってより魅力的でわかりやすいコンテンツを提供することに繋がります。ウェブ開発の初心者から上級者まで、幅広く活用できる技術ですので、ぜひ試してみてください。

この記事を通して、BubbleTooltips.jsの基本的な使い方を理解し、実際に自分のウェブサイトやブログに適用することで、よりインタラクティブでユーザーフレンドリーなサイト作りに役立ててください。

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

吹き出し フキダシ href BubbleTooltips.js
関連記事