jQueryUI：ツールチップを表示させる

サンプルはこちら。

See the Pen vuaif by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

カーソルを置いた際にツールチップを表示させます。
注釈や説明の表示に役立ちます。

JavaScript

$(function() {
  $('.contents').tooltip({
    show:false,
    hide:false
  });
});

「.contets」レイヤーに対して「tooltip()」コンポーネントを適用しています。
これにより「.contents」内の「title」属性すべてに反応しツールチップが表示されます。

サンプルでは上記のようにプロパティ設定をしていますが、最短下記のようにコンポーネント指定するだけで適用されます。

$(function() {
  $('.contents').tooltip();
});

ツールチップの表示・非表示の際にアニメーションが付きますが、ややバグっぽい挙動をするので前述のようにアニメーションを止めてしまった方が良いように思えます。