jQuery UI のツールチップは、HTML 要素に追加された title 属性を使って情報を提供する便利な機能です。この技術ガイドでは、標準的なツールチップの実装から始めて、高度なカスタマイズ方法までを解説します。
まず、基本的な HTML ページを作成しましょう。以下のコードを使用して新しいファイルを作成してください：
<html>
<head>
<meta charset="utf-8">
<title>ツールチップデモ</title>
<link rel="stylesheet" href="css/jquery-ui.min.css">
<style>
p { font-family: 'Arial', sans-serif; }
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('#info').tooltip({
position: {
my: 'center bottom',
at: 'center top+5'
}
});
});
</script>
</head>
<body>
<p>ここにリンクがあります: <a id="info" href="#" title="これはツールチップです">クリックしてみよう！</a></p>
</body>
</html>
このページには、シンプルなツールチップが含まれています。ツールチップは、リンク要素の上にマウスを置いたときに表示されます。
ツールチップのスタイル変更
次に、ツールチップの外観をカスタマイズしてみましょう。以下のような CSS を作成し、適用してください：
<style>
.ui-tooltip {
background-color: #333;
color: #fff;
border-radius: 4px;
padding: 10px;
}
.ui-tooltip-content::after {
content: '';
position: absolute;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
bottom: -10px;
left: 10px;
}
</style>
これにより、ツールチップの背景色や角丸の設定、さらにポインターのスタイルを簡単に変更できます。
AJAX を使用した動的コンテンツ
AJAX を利用して、ツールチップの内容を動的に読み込むことも可能です。次の例では、外部のテキストファイルからデータを取得し、それをツールチップとして表示します。
<script>
$(document).ready(function(){
$('#dynamicInfo').tooltip({
content: function(callback){
$.ajax({
url: 'data.txt',
success: function(data){
callback(data);
}
});
}
});
});
</script>
ここで、「data.txt」には、ツールチップに表示したい任意のテキストを含めます。
イベントの利用
ツールチップに関連するイベントを活用することで、よりインタラクティブな操作を実現できます。例えば、ツールチップが開かれたときや閉じられたときに特定の処理を行うことが可能です。
<script>
$(document).ready(function(){
$('#interactiveInfo').tooltip().on('tooltipopen', function(event, ui){
console.log('ツールチップが開かれました');
}).on('tooltipclose', function(event, ui){
console.log('ツールチップが閉じられました');
});
});
</script>
位置調整の詳細
ツールチップの位置を微調整することも可能です。以下のように、position オプションを使って、具体的な座標指定を行います。
<script>
$(document).ready(function(){
$('#positionedInfo').tooltip({
position: {
my: 'left center',
at: 'right center'
}
});
});
</script>
この設定では、ツールチップがリンク要素の右側に配置されるようになります。