本来のツールチップをテーマ別にカスタマイズされたものに置き換えます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p>
<a href="#" title="これがこのウィジットです。">ツールチップ</a> は任意の要素に付与することが可能です。
要素に対してマウスオーバーすると、タイトル属性の内容が小さなボックスとして要素の隣にネイティブのツールチップのように表示されます。
</p>
<p>
ネイティブのツールチップで無いため、スタイルを設定することが可能です。
幾つかのテーマは、
<a href="http://themeroller.com" title="ThemeRoller: jQuery UIのスタイルテーマのビルドツールです。">ThemeRoller</a>
に沿ってツールチップのスタイルもビルドします。
</p>
<p>ツールチップはフォーム要素にも有用で, 各要素に追加の捕捉情報を表示させることが出来ます。</p>
<p><label for="age">年齢:</label><input id="age" title="この情報は統計のためにのみ使用します。" /></p>
<p>フィールドをマウスオーバーするとツールチップが表示されます。</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Custom Styling</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
</script>
<style>
.ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
</head>
<body>
<p>
<a href="#" title="これがこのウィジットです。">ツールチップ</a> は任意の要素に付与することが可能です。
要素に対してマウスオーバーすると、タイトル属性の内容が小さなボックスとして要素の隣にネイティブのツールチップのように表示されます。
</p>
<p>
ネイティブのツールチップで無いため、スタイルを設定することが可能です。
幾つかのテーマは、
<a href="http://themeroller.com" title="ThemeRoller: jQuery UIのスタイルテーマのビルドツールです。">ThemeRoller</a>
に沿ってツールチップのスタイルもビルドします。
</p>
<p>ツールチップはフォーム要素にも有用で, 各要素に追加の捕捉情報を表示させることが出来ます。</p>
<p><label for="age">年齢:</label><input id="age" title="この情報は統計のためにのみ使用します。" /></p>
<p>フィールドをマウスオーバーするとツールチップが表示されます。</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Custom animation demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<script>
$(function() {
$( "#show-option" ).tooltip({
show: {
effect: "slideDown",
delay: 250
}
});
$( "#hide-option" ).tooltip({
hide: {
effect: "explode",
delay: 250
}
});
$( "#open-event" ).tooltip({
show: null,
position: {
my: "left top",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
}
});
});
</script>
</head>
<body>
<p>ツールチップのアニメーションのカスタマイズには幾つか異なる方法があります。</p>
<p>
<a id="show-option" href="#" title="スライドダウンで表示">show</a>オプションと
<a id="hide-option" href="#" title="エクスプロードエフェクトで非表示">hide</a>オプションを使用する方法。
</p>
<p>
<a id="open-event" href="#" title="下に移動しながら表示">openイベント</a>を使用する方法。
</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Custom content</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
.photo {
width: 300px;
text-align: center;
}
.photo .ui-widget-header {
margin: 1em 0;
}
.map {
width: 350px;
height: 350px;
}
.ui-tooltip {
max-width: 350px;
}
</style>
<script>
$(function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
text + "'>";
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
</script>
</head>
<body>
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>シュテファン大聖堂</h2>
<h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="data-geo">ウィーン、オーストリア</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
<img src="/demo/js/jqueryui/widgets/tooltip/images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all" />
</a>
</div>
<div class="ui-widget photo">
<div class="ui-widget-header ui-corner-all">
<h2>タワーブリッジ</h2>
<h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="data-geo">イギリス、ロンドン</a></h3>
</div>
<a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
<img src="/demo/js/jqueryui/widgets/tooltip/images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all" />
</a>
</div>
<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>
and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Forms</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
label {
display: inline-block; width: 5em;
}
fieldset div {
margin-bottom: 2em;
}
fieldset .help {
display: inline-block;
}
.ui-tooltip {
width: 210px;
}
</style>
<script>
$(function() {
var tooltips = $( "[title]" ).tooltip();
$( "<button>" )
.text( "ヘルプを表示" )
.button()
.click(function() {
tooltips.tooltip( "open" );
})
.insertAfter( "form" );
});
</script>
</head>
<body>
<form>
<fieldset>
<div>
<label for="firstname">名</label>
<input id="firstname" name="firstname" title="名前を入力してください" />
</div>
<div>
<label for="lastname">姓</label>
<input id="lastname" name="lastname" title="苗字を入力してください" />
</div>
<div>
<label for="address">住所</label>
<input id="address" name="address" title="ご自宅、または会社の住所をご入力ください" />
</div>
</fieldset>
</form>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Track the mouse</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
label {
display: inline-block;
width: 5em;
}
</style>
<script>
$(function() {
$( document ).tooltip({
track: true
});
});
</script>
</head>
<body>
<p>
<a href="#" title="これがこのウィジットです。">ツールチップ</a> は任意の要素に付与することが可能です。
要素に対してマウスオーバーすると、タイトル属性の内容が小さなボックスとして要素の隣にネイティブのツールチップのように表示されます。
</p>
<p>
ネイティブのツールチップで無いため、スタイルを設定することが可能です。
幾つかのテーマは、
<a href="http://themeroller.com" title="ThemeRoller: jQuery UIのスタイルテーマのビルドツールです。">ThemeRoller</a>
に沿ってツールチップのスタイルもビルドします。
</p>
<p>ツールチップはフォーム要素にも有用で, 各要素に追加の捕捉情報を表示させることが出来ます。</p>
<p><label for="age">年齢:</label><input id="age" title="この情報は統計のためにのみ使用します。" /></p>
<p>フィールドをマウスオーバーするとツールチップが表示されます。</p>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Video Player demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
.player {
width: 480px;
height: 250px;
border: 2px groove gray;
background: rgb(200, 200, 200);
text-align: center;
line-height: 250px;
}
.ui-tooltip {
border: 1px solid white;
background: rgba(20, 20, 20, 1);
color: white;
}
.set {
display: inline-block;
}
.notification {
position: absolute;
display: inline-block;
font-size: 2em;
padding: .5em;
box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
}
</style>
<script>
$(function() {
function notify( input ) {
var msg = $.trim( input.data( "tooltip-title" ) || input.text() + " を選択" );
$( "<div>" )
.appendTo( document.body )
.text( msg )
.addClass( "notification ui-state-default ui-corner-bottom" )
.position({
my: "center top",
at: "center top",
of: window
})
.show({
effect: "blind"
})
.delay( 1000 )
.hide({
effect: "blind",
duration: "slow"
}, function() {
$( this ).remove();
});
}
$( "button" ).each(function() {
var button = $( this ).button({
icons: {
primary: $( this ).data( "icon" )
},
text: !!$( this ).attr( "title" )
});
button.click(function() {
notify( button );
});
});
$( ".set" ).buttonset({
items: "button"
});
$( document ).tooltip({
position: {
my: "center top",
at: "center bottom+5",
},
show: {
duration: "fast"
},
hide: {
effect: "hide"
}
});
});
</script>
</head>
<body>
<div class="player">video要素(HTML5?)</div>
<div class="tools">
<span class="set">
<button data-icon="ui-icon-circle-arrow-n" title="いいね！">高く評価！</button>
<button data-icon="ui-icon-circle-arrow-s">低く評価</button>
</span>
<div class="set">
<button data-icon="ui-icon-circle-plus" title="後で試聴する">追加</button>
<button class="menu" data-icon="ui-icon-triangle-1-s">お気に入りリストに追加</button>
</div>
<button title="この動画をシェア">シェア</button>
<button data-icon="ui-icon-alert">違反動画を報告</button>
</div>
</body>
</html>
ブラウザが表示するツールチップをテーマ毎のもの、またはカスタマイズしたものに置き換えます。
- タイトルだけでなく、インライン脚注やAjaxを介して取得したコンテンツを表示します。
- 位置の調整をします。例えば、「要素の下の中央」といった指定が可能です。
- 拡張したスタイルを追加することで、警告やエラーといった表現をすることが可能です。
ツールチップの表示、非表示にはフェードアニメーションが使用されています。
このアニメーションはshowとhideオプションで変更することが可能です。
itemsとcontentsは同期されている必要があります。
片方を変更する場合は、もう片方も変更するようにしてください。
通常、無効になっている要素はDOMイベントをトリガしません。
したがって、無効な要素のツールチップのプロパティを制御することが出来ず、
ツールチップを表示／非表示する際には、イベントをリッスンし続けなければいけません。
結果としてjQuery UIは無効な要素に対してのツールチップの挙動を保証することが出来ません。
そのため、残念ながら無効な要素に対してツールチップを実装する必要がある場合、
jQuery UIのツールチップとネイティブのツールチップが混合してしまうかもしれません。
ツールチップはいくつかの機能的なCSSを必要とします。
このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。
依存関係
| オプション |
説明 |
| content |
型：Function() or String
初期値：(title属性を返す関数)
ツールチップの内容を指定します。
このオプションを変更する際には、同様にitemsオプションも変更するようにしてください。
$( ".selector" ).tooltip({ content: "Awesome title!" });
// getter
var content = $( ".selector" ).tooltip( "option", "content" );
// setter
$( ".selector" ).tooltip( "option", "content", "Awesome title!" );
|
| disabled |
型：Boolean
初期値：false
trueを指定すると、ツールチップを無効化します。
|
| hide |
型：Boolean or Number or String or Object
初期値：null
ツールチップを隠す際にアニメーションするか、またどのようにアニメーションするかを指定します。
- Boolean
-
falseが指定されるとアニメーションはされず、即座に非表示になります。
trueを指定すると、デフォルト指定されているdurationとeasingによるフェードアウトアニメーションになります。
- Number
-
指定された値のdurationとデフォルト指定のeasingによるフェードアウトになります。
- String
-
指定されたエフェクト名でhideアニメーションを行います。
"slideUp"のようなjQueryのエフェクトも、"fold"のようなjQuery UIのエフェクトのどちらも指定可能です。
いずれの場合もdurationとeasingはデフォルトのものが使用されます。
- Object
-
オブジェクトの場合は、effect, duration, easingのプロパティが提供されています。
effectにjQueryのメソッド名が指定されればそれを使用し、そうでなければjQuery UIのエフェクト名が指定されたとみなして処理します。
もし、jQuery UI effectに追加の設定をしていれば、それを使用することも可能です。
durationまたはeasingが省略された場合は、デフォルト値が使用されます。
effectが省略された場合は、"fadeOut"が使用されます。
|
| items |
型：Selector
初期値：[title]
ツールチップとして表示したいセレクタを指定します。
title属性以外のものをツールチップのコンテンツとしたい場合や
イベントによってセレクタを変えたい場合にカスタマイズをします。
このオプションを変更する場合は、contentオプションも同じように変更する必要があります。
|
| position |
型:Object
初期値:{ my: "left top+15", at: "left bottom", collision: "flipfit" }
位置の設定を行います。
ofプロパティの初期値は対象要素になっていますが、これは上書き可能です。
以前は初期値は、
{ my: "left+15 center", at: "right center", collision: "flipfit" }でしたが、
jQuery UI 1.9.0ではよりネイティブのツールチップに近い位置に変更されました。
|
| show |
型：Boolean or Number or String or Object
初期値：null
ツールチップを表示する際にアニメーションするか、またどのようにアニメーションするかを指定します。
- Boolean
-
falseが指定されるとアニメーションはされず、即座に表示されます。
trueを指定すると、デフォルト指定されているdurationとeasingによるフェードインアニメーションになります。
- Number
-
指定された値のdurationとデフォルト指定のeasingによるフェードインになります。
- String
-
指定されたエフェクト名でhideアニメーションを行います。
"slideUp"のようなjQueryのエフェクトも、"fold"のようなjQuery UIのエフェクトのどちらも指定可能です。
いずれの場合もdurationとeasingはデフォルトのものが使用されます。
- Object
-
オブジェクトの場合は、effect, duration, easingのプロパティが提供されています。
effectにjQueryのメソッド名が指定されればそれを使用し、そうでなければjQuery UIのエフェクト名が指定されたとみなして処理します。
もし、jQuery UI effectに追加の設定をしていれば、それを使用することも可能です。
durationまたはeasingが省略された場合は、デフォルト値が使用されます。
effectが省略された場合は、"fadeIn"が使用されます。
|
| tooltipClass |
型:String
初期値:null
ツールチップのウィジットにclassを追加します。
警告やエラー用のスタイルを表現する際などに使用されます。
これはclassesオプションに取って代えられる可能性があります。
|
| track |
型:Boolean
初期値:false
ツールチップがマウスに追従するか否かを指定します。
|
| メソッド | 説明 |
| close() |
ツールチップを閉じます。
これは非委任ツールチップ(ツールチップに紐づけている要素とは関係ない要素?)から呼ばれるために用意されています。
$( ".selector" ).tooltip( "close" );
|
| destroy() |
ツールチップの機能を完全に削除します。
|
| disable() |
ツールチップを無効化します。
|
| enable() |
ツールチップを有効にします。
|
| open() |
ツールチップを開きます。
これは非委任ツールチップ(ツールチップに紐づけている要素とは関係ない要素?)から呼ばれるために用意されています。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| widget() |
戻り値：Object
ツールチップを含めたjQueryオブジェクトを返します。
|
| イベント |
説明 |
| close( event, ui ) |
型：tooltipclose
- ui.tooltip
-
型:
jQuery
生成されたツールチップ要素です。
フォーカスが外れた(focusout)、またはマウスポインタが外れた(mouseleave)りして、
ツールチップが閉じられた際にトリガされます。
$( ".selector" ).tooltip({
close: function( event, ui ) {}
});
$( ".selector" ).on( "tooltipclose", function( event, ui ) {} );
|
| create( event, ui ) |
型：tooltipcreate
ツールチップが生成された際にトリガされます。
|
| open( event, ui ) |
型：tooltipopen
- ui.tooltip
-
型:
jQuery
生成されたツールチップ要素です。
フォーカスが当たった(focusin)、またはマウスポオーバー(mouseover)したなど、
ツールチップが表示された際にトリガされます。
|
Back to top