CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips

Category
： Javascript

今回ご紹介するTooltipsとはCreate simple tooltips with CSS and jQuery - Part 2: Smart Tooltipsでご紹介されています。

使い方が分からないよ＞＜って人の為に使い方や少しいじる程度の解説でもしておきます。

Tooltips

Javascript

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);
		
		if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
		
		$(this).removeAttr("title").mouseover(function(){
					my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400);
		}).mousemove(function(kmouse){
				var border_top = $(window).scrollTop(); 
				var border_right = $(window).width();
				var left_pos;
				var top_pos;
				var offset = 20;
				if(border_right - (offset *2) >= my_tooltip.width() + kmouse.pageX){
					left_pos = kmouse.pageX+offset;
					} else{
					left_pos = border_right-my_tooltip.width()-offset;
					}
					
				if(border_top + (offset *2)>= kmouse.pageY - my_tooltip.height()){
					top_pos = border_top +offset;
					} else{
					top_pos = kmouse.pageY-my_tooltip.height()-offset;
					}	
				
				
				my_tooltip.css({left:left_pos, top:top_pos});
		}).mouseout(function(){
				my_tooltip.css({left:"-9999px"});				  
		});
		
		}

	});
}

	
$(document).ready(function(){
	 simple_tooltip("a","tooltip");
});

Create simple tooltips with CSS and jQuery - Part 2: Smart Tooltipsで公開されてソースそのままなんですがこのままだと全てのaタグのtitleに反応してしまいます。
サイトの一部だけに使いたい場合は一番下に記述されているソースを変更して下さい。

例えば｢id="contents"｣内のaタグだけに効かせたい場合は下記ソースのようになります。

$(document).ready(function(){
	 simple_tooltip("#contents a","tooltip");
});

後触るとしたらポップアップ時の表示位置についてと思うですが、下記ソースの数値を変更したら表示位置が変わりますよ。

var offset = 20;

ちなみにポップアップに表示されているソースはこんな感じです。

XHTML

<div class="tooltip">
<p>aタグのタイトル内のテキストがここに反映されます。</p>
</div>

XHTMLが上記ソースなので、それをCSSでデザインしたらいいだけです。

CSS

div.tooltip	{
	width: 250px;
	position: absolute;
	left: -9999px;
	background: #EEE;
	padding: 5px;
	border: 1px solid #AAA;
}

div.tooltip p{
	color: #FFF;
	background: #222;
	padding: 5px 10px;
}

※｢position: absolute;｣、｢left: -9999px;｣で指定してあるのは、一度のプレビュー時に表示を消しておく為のものです。

参考程度にデモページでもご覧下さい。