Simple Tooltip


Description: シンプルなツールチップです。少しのコードで実装可能で、画像を含めることも出来ます。クロスブラウザにも対応。
Sample: demo
Tutorial: Simple Tooltip w/ jQuery & CSS
License: -

Sample

ツールチップのデモです。非常に簡単なコードでこのように実装こうやって画像も含められます。非常に簡単ですねすることが可能です。アンカータグにtip_triggerというclass名を割当てて、その後にspanにtipというclass名をあてればOK。もちろん、テキストのみこのようにテキストだけでもOK。汎用性の高いツールチップです。でも問題なく、リンクも貼れます。

Note

$(document).ready(function() {
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); //Show tooltip
	}, function() {
		tip.hide(); //Hide tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 20; //Get X coodrinates
		var mousey = e.pageY + 20; //Get Y coordinates
		var tipWidth = tip.width(); //Find width of tooltip
		var tipHeight = tip.height(); //Find height of tooltip

		var tipVisX = $(window).width() - (mousex + tipWidth);
		var tipVisY = $(window).height() - (mousey + tipHeight);

		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 20;
		}
		tip.css({  top: mousey, left: mousex });
	});
});

軽量で済みます。

Related snippet :

  • Description: クリックで画像が切り替わるシンプルなビューアです。マウスを乗せるとツールチップも出現します。キャプションも実装可能でクロスブラウザで動作可能です。コ ...
  • Description: マウスをストーカーする軽量なツールチップです。手軽に実装できて、少ないコードで実装できます。また、画像にも対応しており、キャプションも加えることが可 ...
  • Description: ベーシックなツールチップです。マウスを要素に乗せると透過された噴出しがフェードインします。噴出し内のテキストはアンカータグのtitleを読み込みます ...
  • Description: Youtubeにあるようなシェアボタン(クリックでボタンが出現する)を実装します。URL短縮も付いています。 Sample: demo ...
  • Description: ベーシックなツールチップです。今は多くのライブラリが存在するので勉強用という感じですかね・・オンマウスすることでtitle要素のテキストがツールチッ ...
  • Description: シンプルなツールチップです。アンカータグのtitleをツールチップとして表示させます。色の変更も可能。主要ブラウザで稼動してくれます。 S ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...