簡単なツールチップ（ツールヒント）を表示する方法 Tooltip

サンプル

サンプル1   サンプル2

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.tooltips.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.tooltips.js"></script>

JavaScript

設定したい要素などを指定し、実行します。

$(function() { var toolTipsObj = $.toolTips({ targetElement : $('.sample') }); });

HTML

title属性がツールチップとして表示するテキストになります。

<span class="sample" title="テスト1">サンプル</span>

オプション

以下のオプションが設定できます。

オプション	初期値	説明
className	'tooltop'	ツールチップのCSSクラス名
targetElement	{}	ツールチップを適用する要素
setDocument	'title'	ツールチップに表示する内容 設定可能な値：文字列、DOMオブジェクト、'alt'、'title'、'rel'。 'alt'、'title'、'rel'はそれぞれの属性値をセットします。
animation	false	フェードイン・アウトアニメーションの有無 設定可能な値：false = 無効、true = 有効
duration	300	animationがtrueの時のアニメーション速度
positionX	10	マウスカーソルからの表示位置（X軸）
positionY	0	マウスカーソルからの表示位置（Y軸）
insert	'body'	ツールチップ要素の出力先（要素の位置）
insertAppendMode	'append'	出力の仕方 設定可能な値：'append'、'after'、'before'、'html'
mouseMove	false	マウスカーソルの位置（動き）と合わせるかどうか

$(function() { var toolTipsObj = $.toolTips({ targetElement : $('.sample'), className : 'hint', animation : true }); });