jQuery UI の Tooltip で、入力欄にも画像にもツールチップを表示させる方法。
実装例（サンプル）
実装例（サンプル）の動作について
「サンプル入力欄: 」の右横のテキスト入力欄にカーソルを合わせると、カーソルの右下に「入力欄のツールチップ」という内容のツールチップを表示する。
「サンプル入力欄: 」のテキストをクリックするなどしてテキスト入力欄をフォーカスすると、「入力欄のツールチップ」という内容のツールチップを、テキスト入力欄の下に表示する。
「向日葵の画像」にカーソルを合わせると、カーソルの右下に「画像のツールチップ」という内容のツールチップを表示する。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>
JavaScript
<script>
jQuery( function() {
jQuery( "#sample" ).tooltip( {
items: "[title], img",
content: function() {
var element = jQuery( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
},
track: true
} );
} );
</script>
jQuery( function() {
jQuery( "#sample" ).tooltip( {
items: "[title], img",
content: function() {
var element = jQuery( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
},
track: true
} );
} );
</script>
CSS
<style>
<!--
#sample {
padding: 1em;
}
#sample label {
color: #444444;
}
-->
</style>
<!--
#sample {
padding: 1em;
}
#sample label {
color: #444444;
}
-->
</style>
HTML
<div id="sample">
<label for="sampleTooltip">サンプル入力欄: </label>
<input id="sampleTooltip" title="入力欄のツールチップ" />
<br />
<img src="jquery-ui-tooltip-content-sampleImg.png" alt="画像のツールチップ" />
</div>
<label for="sampleTooltip">サンプル入力欄: </label>
<input id="sampleTooltip" title="入力欄のツールチップ" />
<br />
<img src="jquery-ui-tooltip-content-sampleImg.png" alt="画像のツールチップ" />
</div>