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( {
track: true
} );
} );
</script>
jQuery( function() {
jQuery( "#sample" ).tooltip( {
track: true
} );
} );
</script>
CSS
<style>
<!--
#sample {
padding: 1em;
}
#sample div {
float: left;
width: 150px;
height: 150px;
margin: 5px;
background-color: red;
border: 1px solid #444444;
border-radius: 5px;
}
-->
</style>
<!--
#sample {
padding: 1em;
}
#sample div {
float: left;
width: 150px;
height: 150px;
margin: 5px;
background-color: red;
border: 1px solid #444444;
border-radius: 5px;
}
-->
</style>
HTML
<div id="sample">
<div title="ボックス要素１のツールチップ"></div>
<div title="ボックス要素２のツールチップ"></div>
<div title="ボックス要素３のツールチップ"></div>
<br style="clear: left;" />
</div>
<div title="ボックス要素１のツールチップ"></div>
<div title="ボックス要素２のツールチップ"></div>
<div title="ボックス要素３のツールチップ"></div>
<br style="clear: left;" />
</div>