jQuery

jQuery UIでTooltip（ツールチップ）を実装する方法

2021年9月29日 by single コメントはまだありません

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」の４つのプロパティを配列で指定できます。
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」の４つのプロパティを配列で指定できます。
effect ：『String型』の指定のように、効果を文字列で指定できます。
delay：効果開始までの時間（ミリ秒）
duration：効果の継続時間（ミリ秒）
easing：効果のスピードや動き方を定義するプロパティ。詳細はこちらの「Easings」を参照ください。実際には「linear」や「swing」などを指定してください。

track 

ツールチップがマウスの後を追うかどうかのオプション。デフォルトは「false」。

ご参考

関連ページ