jQuery UIでTooltip(ツールチップ)を実装する方法
Contents
jQuery UIでTooltip(ツールチップ)を実装する方法
サンプル
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tooltip demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- ウェブアイコン「Ionicons」-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$("#area1" ).tooltip();
$("#area2" ).tooltip(
{
content: "お名前を入力してください。"
,position: { my: "left+15 center", at: "right center" }
}
);
$("#area3" ).tooltip(
{
show: {
effect: "slideDown",
delay: 250
}
,hide: {
effect: "explode",
delay: 250
}
,track: true
,items: "img[alt]"
,content: function()
{
var element = $( this );
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
}
}
);
} );
</script>
</head>
<body>
<div id="area1">
<p>
<a href="./" title="ホームへはこちらをクリックしてください">ホーム</a>
</p>
<p>
<ion-icon name="information-circle-outline" style="font-size:64px;" title="お知らせ"></ion-icon>
</p>
<p>
<button title="ご注意" type="button"><ion-icon name="warning-outline" style="font-size:64px;"></ion-icon></button>
</p>
</div>
<div id="area2">
<p>
<label for="prefecture">お名前:</label>
<input id="prefecture" title="" />
</p>
</div>
<div id="area3">
<img src="https://www.single-life.tokyo/wp-content/uploads/2020/11/face.jpg" style="width:10%;height:10%;" alt="シロクマさん" />
</div>
</body>
</html>
デモ
jQuery UI Tooltip Widget
実装方法
まず、ツールチップを設定したいオブジェクトに「title」属性を設定し、ツールチップとして表示させたい文字列を設定します。
<a href="./" title="ホームへはこちらをクリックしてください">ホーム</a>
そして、jQueryでtooltipをオプションなしで呼び出す場合は以下のようになります。
$("#area1" ).tooltip();
オプションなしで、実装すると、以下のような感じでツールチップが表示されます。
title属性が設定されているオブジェクトはたいてい、ツールチップ表示可能です。
オプション
オプションを指定すると、さまざまにカスタマイズできます。
classes
ツールチップのスタイルを指定できます。デフォルトは「{“ui-tooltip”: “ui-corner-all ui-widget-shadow”}」です。
Cssクラスを設定します。指定方法は以下のような感じになります。
$( ".selector" ).tooltip({
classes: {
"ui-tooltip": "highlight"
}
});
content
ツールチップで表示したい文字列のオプションになります。
デフォルトはHTMLのtitle属性の文字列になります。
文字列を指定する場合には以下のようになります。
$("#area2" ).tooltip(
{
content: "お名前を入力してください。"
,position: { my: "left+15 center", at: "right center" }
}
また、文字列以外にもfunctionも指定することもできます。例えば、以下の場合には、imgタグの場合、title属性ではなく、alt属性をツールチップとして表示させています。
$("#area3" ).tooltip(
{
show: {
effect: "slideDown",
delay: 250
}
,hide: {
effect: "explode",
delay: 250
}
,track: true
,items: "img[alt]"
,content: function()
{
var element = $( this );
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
}
}
disabled
ツールチップを無効にするかどうかのオプション
デフォルトは「false」です。
hide
ツールチップが閉じる際の、効果などをしているオプションになります。指定する型は四つになります。
Boolean型 | 「false」を指定すると閉じる際の効果なしとなります。 「true」にすると、デフォルトの時間でツールチップがフェードアウトします。 このオプションのデフォルトは「true」です。 |
Number型 | 指定された時間でフェードアウトします、指定するのはミリ秒 |
String型 | ツールチップが閉じる際の効果を指定します、指定できるのは以下の文字列 slideUp または、「jQuery UI effect」のEffect文字列 blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer |
Object型 | 「effect」「delay」「duration」「easing」の4つのプロパティを配列で指定できます。 effect :『String型』の指定のように、効果を文字列で指定できます。 delay:効果開始までの時間(ミリ秒) duration:効果の継続時間(ミリ秒) easing:効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。 |
items
ツールチップを表示させる対象を指定するセレクタになります。デフォルトは「[title]」なので、title属性を持つオブジェクトがツールチップ表示対象のオブジェクトになります。
以下のようにすればimgオブジェクトのうちalt属性が設定されているオブジェクトがツールチップ対象となります。
$("#area3" ).tooltip(
{
show: {
effect: "slideDown",
delay: 250
}
,hide: {
effect: "explode",
delay: 250
}
,track: true
,items: "img[alt]"
,content: function()
{
var element = $( this );
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
}
}
position
ツールチップの表示位置を定義するオプションになります。
指定方法は「jQuery UI Position」に従い、設定されます。
デフォルトは「{ my: “left top+15”, at: “left bottom”, collision: “flipfit” }」です。
テキストボックスのサンプルでは「 position: { my: “left+15 center”, at: “right center” } 」として、テキストボックスに右側にツールチップが表示されるようにしてあります。
詳細はこちらをご覧ください。
show
ツールチップを開く際の、効果などを指定するオプションになります。指定する型は四つになります。
Boolean型 | 「false」を指定すると開く際の効果なしとなります。 「true」にすると、デフォルトの時間でタブがフェードインします。 |
Number型 | 指定された時間でフェードインします、指定するのはミリ秒 |
String型 | タブを開く際の効果を指定します、指定できるのは以下の文字列 slideDown または、「jQuery UI effect」のEffect文字列 blind bounce clip drop explode fade fold highlight puff pulsate scale shake size slide transfer |
Object型 | 「effect」「delay」「duration」「easing」の4つのプロパティを配列で指定できます。 effect :『String型』の指定のように、効果を文字列で指定できます。 delay:効果開始までの時間(ミリ秒) duration:効果の継続時間(ミリ秒) easing:効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。 |
track
ツールチップがマウスの後を追うかどうかのオプション。デフォルトは「false」。
ご参考
関連ページ
- jQuery UIでTooltip(ツールチップ)を表示する位置を設定する方法
- jQueryプラグイン「Tooltipster」を使ってツールチップを実装する方法
- Bootstrapでツールチップ(Tooltip)を作る方法
- CSSでツールチップ(Tooltip)を自作する方法