コニファ・ロゴ

csstest:jQuerプラグインjquery.tooltip.jsを使って、多機能なツールチップ(tooltip)を実装(1)

多機能なtooltipを実装してくれます。下のサンプルのリンクテキスト(ブルーの文字部分)、input欄、または画像にカーソルを乗せると各種tooltipが発動します。オリジナルのcssにやや難があり、少し修正が必要です(特に日本語で利用する場合に)。

→ jquery.tooltip.jsを使って、多機能なツールチップ(tooltip)を実装(2)へ

また、このページのtooltipをブロックして、すべて無効にすることもできます。

 tooltip:有効  tooltip:無効
(サンプル1)デフォルトのtooltip

百万石 BtoB WEB受注システムへのリンク

 :

Code

$('#set1 *').tooltip();
(サンプル2)文章中の脚注としてのtooltip 【ダミーテキスト】近年急速に普及が進んでいるスマートフォンや、タブレット型多機能端末*
連携したシステム*の構築など新しい技術にも注力すると共に、従来の商品もより使い勝手がよく
なるような仕様追加、機能アップを図ってまいります。
【ダミーテキスト】ハードウェア、ソフトウェア、OS、ネットワークなどの全体の構成。
低消費電力・小メモリのハードで小型・軽量化、ハードの拡張性は低い。

Code

$("#foottip a").tooltip({
	bodyHandler: function() {
	return $($(this).attr("href")).html();
	},
	showURL: false
});
(サンプル3)画像のtooltip モッコウバラ

Code

$('#tonus').tooltip({
	delay: 0,
	showURL: true,
	bodyHandler: function() {
	return $("<img/>").attr("src", this.src);
	}
});
(サンプル4)ナビゲーションのtooltip

Code

$('#conifer a').tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	fade: 250
});
(サンプル5)文章中に表示する吹き出し風のtooltip バックグラウンドに吹き出し風の画像を使用。

fancy tooltip(1) ←ここにカーソルを乗せるとfancy tooltipが発動。スクロールの位置によっては、吹き出しのしっぽの位置がおかしくなります。

fancy tooltip(2) ←ここにカーソルを乗せるとfancy tooltipが発動。スクロールの位置によっては、吹き出しのしっぽの位置がおかしくなります。

pretty tooltip ←ここにカーソルを乗せるとpretty tooltipが発動。背景画像は固定サイズなので、文字量が少なすぎても多すぎてもこのtooltip表示内のスタイル設定が難しい。

Code

$("#fancy, #fancy2").tooltip({
	track: true,
	delay: 0,
	showURL: false,
	opacity: 1,
	fixPNG: true,
	showBody: " - ",
	extraClass: "pretty fancy",
	top: -15,
	left: 5
});

$('#pretty').tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	extraClass: "pretty",
	fixPNG: true,
	opacity: 0.95,
	left: -120
});

 

戻るボタン