jQuery UI ツールチップのサンプル(Tooltip)

jQuery UIのツールチップのサンプルです。
Tooltip Widgetを使用します。

目次

Tooltip Widget

  • jQuery UIのライブラリです。
  • title属性がある要素にカーソルを当てるとツールチップが表示されます。
  • jquery.min.jsに加えてjquery-ui.min.jsとjquery-ui.cssを追加します。
  • 以下はjQuery UIのtooltipのリンクです。
    http://api.jqueryui.com/tooltip/

ツールチップのサンプル

ツールチップのサンプルです。
「テスト1」の文字の上にカーソルを当てるとツールチップが表示されます。
「あいうえお」の上にカーソルを当ててもツールチップは表示されません。

テスト1・・・あいうえお

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<p><span title="ツールチップ1です">テスト1</span>・・・あいうえお</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
	$(function(){
		$(document).tooltip();
	});
</script>

10行目のtitle属性の値がツールチップの文言として表示されます。

 

ツールチップの見た目を変える

ツールチップの見た目は、jQueryUIのCSSであるjquery-ui.cssに指定されています。
jquery-ui.cssのツールチップのクラスセレクタを指定して見た目を変えます。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
.ui-tooltip {
	font-size: 12px;
	box-shadow: 2px 2px 2px #aaaaaa;
	background:Lavender;
}
</style>

<p><span title="ツールチップ1です">テスト1</span>・・・あいうえお</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
	$(function(){
		$(document).tooltip();
	});
</script>

1行目のjquery-ui.cssはjQueryUIのCSSです。
3行目の.ui-tooltipは、jquery-ui.cssにあるCSSのクラスセレクタです。
4-6行目は、フォントサイズ、ボックスの影、背景色を指定しています。

 

ツールチップの表示方法を変える

ツールチップの表示方法を変える場合、showオプションを使用します。

コード

上記サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<p><span title="ツールチップ1です">テスト1</span>・・・あいうえお</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
	$(document).tooltip({
		show:false
//		show:{effect:"fade",duration:1000}
	});
});
</script>

10行目は、showオプションでfalseを指定しています。アニメーション効果が無効になります。
11行目は、effectと表示の時間を指定しています。
他のeffectの種類は以下のjQueryUIのリンクを参照願います。
http://api.jqueryui.com/category/effects/

 

ツールチップの表示位置を変える

ツールチップの表示位置を変える場合、positionオプションを使用します。

コード

サンプルのコードです。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<p><span title="ツールチップ1です">テスト1</span>・・・あいうえお</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
	$(document).tooltip({
		position:{
			my:"left+30 top",
			at:"right top",
			collision:"flipfit"
		}
	});
});
</script>

10行目は、positionオプションです。
11行目のmyは、ツールチップの位置を表します。
12行目のatは、ツールチップを表示する時の基準の位置を表します。
13行目のcollisionは、ツールチップがウィンドウの幅を超えた時の挙動です。位置を反転させて移動します。

ツールチップを文字の右上に表示させる

atが基準の位置です。right top=タイトルがある文字の右上が基準になっています。
myはツールチップの位置です。left+30で左にずれています。

ツールチップを文字の左上に表示させる

atをleft topにします。left top=タイトルがある文字の左上が基準になっています。
myはツールチップの位置で、left+30で左にずれています。

以下はjQuery UIのpositionのリンクです。
http://api.jqueryui.com/position/

関連の記事

jQuery UI アコーディオンのサンプル(accordion)
jQuery UI カレンダーから日付を入力するサンプル(datepicker)
jQuery UI ダイアログを開くサンプル(Dialog)
jQuery UI タブのサンプル(tabs)
jQuery UI 要素の並び順を変えるサンプル(sortable)
jQuery UI オートコンプリートのサンプル(Autocomplete)
jQuery UI 要素をドラッグ・アンド・ドロップする(draggable/droppable)

△上に戻る