Colortip


Description: マウスを乗せると噴出しが出現するシンプルでベーシックなツールチップです。リンクに飛ぶ前に説明が出るのは大きなゆんー座ビリティですね。
Sample: demo
Tutorial: Colortip – a jQuery Tooltip Plugin
License: 商用個人OKだけど、再配布、販売は不可

Sample

シンプルで手軽に実装できるツールチップです。ヘルプや、入力の説明、商品の説明など、いろいろな場所で使われます。色を変えることも可能 でとても汎用性がありますね。 実際に使用する場合はこのように黒など目立つ色にしたほうが可視性も高くなりそうです。

Note

$(document).ready(function(){

	/* Adding a colortip to any tag with a title attribute: */

	$('[title]').colorTip({color:'yellow'});

});

jQueryとプラグインを読み込んで上記設定を来ないます。

Related snippet :

  • Description: ベーシックなツールチップです。マウスを要素に乗せると透過された噴出しがフェードインします。噴出し内のテキストはアンカータグのtitleを読み込みます ...
  • Description: マウスオーバーでアイコンがスムーズに拡大し、キャプションもツールチップ的に表示させます。全てのブラウザで動作してくれます。 Sample: ...
  • Description: シンプルなツールチップです。アンカータグのtitleをツールチップとして表示させます。色の変更も可能。主要ブラウザで稼動してくれます。 S ...
  • Description: ベーシックなツールチップです。今は多くのライブラリが存在するので勉強用という感じですかね・・オンマウスすることでtitle要素のテキストがツールチッ ...
  • Description: マウスを乗せると縦スライドして色が切り替わるメニュー。テキストメニューをスタイリッシュに見せることができるのでSEOも考慮しているサイトにも使えそう ...
  • Description: シンプルなツールチップです。少しのコードで実装可能で、画像を含めることも出来ます。クロスブラウザにも対応。 Sample: demo ...
  • Description: 画像をクリックするとフリップ(ひっくり返る)するコンテンツを実装するjQueryプラグインです。uiも必要となります。IE6ではフリップするとレイア ...