[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要素で作成されており、自分用にカスタマイズすることもできます。

sponsors

top of page

©2018 coliss