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/

サンプル

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

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

テスト2・・・かきくけこ

コード

上記サンプルのコードです。
18,19行目・・・ツールチップの文言は、title属性の値が表示されます。

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

関連の記事

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



△上に戻る