[jQuery UI] ツールチップを実装する（Tooltip）

投稿日：2018年5月29日

jQueryUIでツールチップを実装するサンプルです。

サンプルソース

例）jQuery UIを使ったツールチップのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryUIツールチップサンプル</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$(function(){
  $(document).tooltip({
    position:{
      at:"left top",        //左上が起点
      my:"left+5 top+20",   //起点から右に5px、下に20pxの位置にツールチップを表示
    },
    show:{
      duration:500,    //表示まで0.5秒遅らせる
      effect:"fade"    //アニメーション「fade」を使用
    }
  });
});
</script>
</head>
<body>
  <p>
    <span title="りんごが有名です">青森県</span>
    <span title="お米が有名です">新潟県</span>
    <span title="落花生が有名です">千葉県</span>
    <span title="お茶が有名です">静岡県</span>
    <span title="うどんが有名です">香川県</span>
  </p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUIツールチップサンプル</title>

$(function(){

$(document).tooltip({

position:{

at:"left top", //左上が起点

my:"left+5 top+20", //起点から右に5px、下に20pxの位置にツールチップを表示

show:{

duration:500, //表示まで0.5秒遅らせる

effect:"fade" //アニメーション「fade」を使用

}

});

</script>

</head>

<body>

<p>

</p>

</body>

</html>

実行サンプル

県名にカーソルを乗せるとツールチップが表示されます。

青森県新潟県千葉県静岡県香川県

オプション

Tabsのオプションには以下のようなものがあります。

【オプション】
オプション	意味
position	表示位置を指定　at：基準位置　my：基準位置からの相対位置
show	表示方法を指定　※show:falseとするとアニメーションなし　duration：ツールチップが表示されるまでの時間（ミリ秒）　effect：ツールチップの表示アニメーション

解説

オプションは上記以外にもあります。
jQueryUI（Tooltip）公式ページ ⇒ https://jqueryui.com/tooltip/

執筆者：とら