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

サンプル

サンプル1   サンプル2

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

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

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

JavaScript

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

HTML

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

オプション

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

オプション 初期値 説明
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 マウスカーソルの位置(動き)と合わせるかどうか