コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

csstest：jQuerプラグインjquery.tooltip.jsを使って、多機能なツールチップ（tooltip）を実装（１）

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

→ jquery.tooltip.jsを使って、多機能なツールチップ（tooltip）を実装（２）へ

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

　tooltip：有効 　tooltip：無効
（サンプル１）デフォルトのtooltip

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

 ：

Code

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

Code

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

Code

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

Code

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

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

fancy tooltip（２） ←ここにカーソルを乗せると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
});

 

戻るボタン