tinyTips


Description: 軽量で手軽なツールチップ実装jQueryです。アンカータグのtitle属性を読み込んでツールチップ化します。画像も含めることが出来ますが、JavaScript内にURLを書くのでこちらは若干使いにくいかも知れません。
Sample: demo
Tutorial: jQuery Plugin: TinyTips 1.1
License: -

Sample

このツールチップはアンカーのtitle属性を使ってツールチップに表示します。非常に軽量でシンプル。すぐに導入できるので汎用性も高いですね。tinyTips は、設定も簡単です。画像を中に含めることも可能ですが、JavaScript内に画像のURLを書くので若干使い勝手は悪いかも知れませんね。

Note

$(document).ready(function() {
			$('a.tTip').tinyTips('title');
			$('a.imgTip').tinyTips('<img src="http://jquery.kachibito.net/wp-content/uploads/2011/01/tinytips01.jpg" /><br />この画像とテキストはJavaScript内に書きます');
			$('img.tTip').tinyTips('title');
			$('h1.tagline').tinyTips('tinyTips are totally awesome!');
		});

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

Related snippet :

  • Description: ベーシックなツールチップです。今は多くのライブラリが存在するので勉強用という感じですかね・・オンマウスすることでtitle要素のテキストがツールチッ ...
  • Description: マウスオーバーでアイコンがスムーズに拡大し、キャプションもツールチップ的に表示させます。全てのブラウザで動作してくれます。 Sample: ...
  • Description: 画像をクリックするとフリップ(ひっくり返る)するコンテンツを実装するjQueryプラグインです。uiも必要となります。IE6ではフリップするとレイア ...
  • Description: ソート出来るポートフォリオを構築できます。IE6や7でも動作しますが、アニメーションが少々怪しい感じです。class名を振ってソートするシンプルな手 ...
  • Description: 文字を波打たせるユニークなプラグインです。リンクをクリックすると指定した要素のテキストが波打つ動作をします。 Sample: demo ...
  • Description: マウスを乗せると噴出しが出現するシンプルでベーシックなツールチップです。リンクに飛ぶ前に説明が出るのは大きなゆんー座ビリティですね。 Sa ...
  • Description: ビフォーアフターを実装するプラグインです。クロスブラウザで動いてくれますよ。実装にはjqueryUIが必要です。 Sample: dem ...