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

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

確認環境
・jquery 1.12.4
・jqueryui 1.12.1

目次

Tooltip Widget

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

サンプル

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

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

コード

上記サンプルのコードです。
18行目のtitle属性の値がツールチップの文言として表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqueryのtooltipのサンプル</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<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>
<style>
</style>
<script>
	$(function(){
		$(document).tooltip();
	});
</script>
</head>
<body >
<p><span title="ツールチップ1です">テスト1</span>・・・あいうえお</p>
</body>
</html>

 

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

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

コード

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<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>
<style>
.ui-tooltip {
	font-size: 12px;
	box-shadow: 2px 2px 2px #aaaaaa;
	background:Lavender;
}
</style>
<body >
<p><span title="ツールチップ1です">テスト1</span>・・・あいうえお</p>
</body>

サンプル

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

 

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

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

コード

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

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

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

</body>

 

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

ツールチップの表示位置を変える場合、positionオプションを使用します。
以下はjQuery UIのpositionのリンクです。
http://api.jqueryui.com/position/

コード

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

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<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>
		$(document).tooltip({
			position:{
				my:"left+30 top",
				at:"right top",
				collision:"flipfit"
			}
		});
</script>
<body >

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

</body>

サンプル

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

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

 

関連の記事

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



△上に戻る