[JS]さまざまなDOM要素にツールチップを表示するスクリプト -Bubble Popup

テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。

jQuery Bubble Popup v.2.0
デモページ：さまざまなDOM要素への実装例

[ad#ad-2]

Bubble Popupの対応ブラウザ

• Internet Explorer 6.5, 7, 8, 9 (beta)
• Firefox 3.5.x
• Safari 5.0.x
• Opera 10.x
• Chrome 6.0.x
• iCab 4.x
• Webkit based browser (reKonq, Arora)
• KHTML-based browser (Konqueror)

Bubble Popupの主な特徴

• あらゆるDOM要素にツールチップ、ポップアップを作成できます。
• ツールチップの表示は左・上・右・下とあらゆる位置に可能。
• 水平・垂直方向の揃え位置を調整可能。
• マウスオーバーとマウスアウトのイベントは自動処理。
• トリガーとなるイベントはカスタマイズ可能。
• IEでも実装可能。
• スタイルはテンプレートで管理。
• ツールチップにはHTMLの配置も可能。
• 距離・速度・タイミング・カラーなど多彩なオプション。
• ショッピングカートのボタン用のツールチップも完備。
• AJAXにも対応。
• 画像の一部にツールチップを表示するのも可能。

Bubble Popupのデモ

How to make a Bubble Popup always visible in the browser’s viewport
ツールチップな常にブラウザの表示領域に表示。

[ad#ad-2]

Change or restore Bubble Popup’s position on window resize to make it always visible
ブラウザがリサイズされてもツールチップが表示されるように位置を補正。

Position and Alignment for Bubble Popups
ツールチップの配置は上下左右、揃えも自由。

Create Bubble Popups for "add-to-cart" shopping cart buttons
ショッピングカートのボタン用のツールチップ。

How to "tag" a picture or add a Bubble Popup for each hotspot inside the picture
画像の中にホットスポットを配置してツールチップを表示。

デモは他にもたくさんあります。
Documentation & Live Demos

Bubble Popupの実装

Bubble PopupはjQueryのプラグインのため、実装にはjquery.jsが必要です。

外部ファイル

JSファイルとCSSファイルを外部として記述します。

<link href="jquery.bubblepopup.v2.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>

JavaScript

指定したDOM要素（.button）にツールチップを表示します。

$(document).ready(function(){
	$('.button').CreateBubblePopup({ innerHtml: 'This is a Bubble Popup!' });
});

スクリプトのオプションでは、表示位置、揃え、サイズ、デザイン、トリガー、アニメーションのスピード・タイミングなどが調整できます。
また、表示されるツールチップはtable要素で作成されており、自分用にカスタマイズすることもできます。