jQuery

jQuery UIでTooltip（ツールチップ）を表示する位置を設定する方法

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

Contents

1 jQuery UIでTooltip（ツールチップ）を表示する位置を設定する方法
2 ツールチップの位置を変更するには？
- 2.1 jQuery UI Position
3 ご参考
- 3.1 関連ページ

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() {
     $( '#default1,#default2' ).tooltip();
     $( '#toplabel' ).tooltip({
      position: {
         my: "center top-50",
         at: "center top",
         collision: "fit"
       }
     });
     $( '#rightlabel' ).tooltip({
      position: {
         my: "left top",
         at: "right+5 top-5",
         collision: "none"
       }
     });
     $( '#bottomlabel' ).tooltip({
      position: {
         my: "center bottom+50",
         at: "center bottom",
         collision: "flipfit"
       }
     });

     $( '#leftlabel' ).tooltip({
      position: {
         my: "right  top",
         at: "left+5 top-5",
         collision: "flip"
       }
     });
   } );
   </script>
</head>
<body>
   <table style="width:1200px">
      <tr>
         <td colspan="2" style="height:50px;"></td>
      </tr>
      <tr>
         <td style="width:100px">
         </td>

         <td>
            <div>
               <p id="default1">
                  <a href="#" title="デフォルト設定">デフォルト設定</a>
               </p>
            <p id="toplabel">
               <a href="#" title="上部ラベル">上部ラベル</a>
               <ion-icon name="chevron-up-circle-outline" style="font-size:32px;" title="上部ラベル"></ion-icon>
            </p>
            <p id="rightlabel">
               <input type="text" title="お名前を入力してください" /> <ion-icon name="chevron-forward-circle-outline" style="font-size:32px;" title="右ラベル"></ion-icon> 
            </p>
            <p id="bottomlabel">
               <button title="下部ラベル" type="button"><ion-icon name="chevron-down-circle-outline" style="font-size:32px;"></ion-icon></button> <input type="text" title="住所を入力してください。" />
            </p>
            <p id="leftlabel">
               <ion-icon name="chevron-back-circle-outline" style="font-size:32px;" title="左ラベル"></ion-icon> <img  src="https://www.single-life.tokyo/wp-content/uploads/2020/11/face.jpg" style="width:20%;height:20%;"  title="シロクマさん" />
            </p>
            <p id="default2">
               <a href="#" title="デフォルト設定">デフォルト設定</a>
            </p>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>

デモ

デモページ

ツールチップの位置を変更するには？

jQuery UI Position

ツールチップの位置を定義するには「jQuery UI Position」を利用します。

jQuery UI Position

位置を指定するには以下のプロパティを利用します。

my	ツールチップの場合、ツールチップを配置する位置を定義するオプションです。定義方法は「（垂直位置）（水平位置）」のように定義します。例）「left top」「center center」「right bottom」のような、『left』『center』『right』『top』『bottom』の文字を定義します。
at	ツールチップの場合だと、リンクやボタン、画像などのツールチップ表示対象のオブジェクトの位置を定義するオプションです。定義方法は「（垂直位置）（水平位置）」のように定義します。例）「left top」「center center」「right bottom」のような、『left』『center』『right』『top』『bottom』の文字を定義します。
collision	ツールチップの場合だと、表示する位置にウインドウ領域がない場合、どうするかのオプションです。定義できる文字列は以下の通りです。 flip：表示位置にウインドウ領域がない場合には、反対方向に表示します fit：表示位置方向にウインドウ領域がない場合には、表示方向は変わらないのですが、表示位置を多少調整します。 fitflip：最初はflipと同じように反対方向で表示させようとしますが、それでも表示領域がない場合には、fitと同じように表示位置も調整します。 none：表示位置の調整を一切しませんデフォルトは「flip」です。