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

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

今回ご紹介する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;」で指定してあるのは、一度のプレビュー時に表示を消しておく為のものです。

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

demo page

Comments

MIYA

MIYA

画像表示ですと、こちらのプラグインではなく、
http://www.css-lecture.com/log/javascript/jquery-tooltip-image-preview.html

こちらを使えば可能ですよ。

2009年11月22日 15:14

bob

bob

ポップアップ内に画像を埋め込むことは可能でしょうか。
(CSSでの背景表示ではなくて)

2009年11月20日 18:19

MIYA

MIYA

Javascriptに記載されている部分をそのまま使った場合は、a要素にtitleを記述したらその内容が表示しれくれます。

デモページのソースを参考にして下さい。

2009年05月22日 04:32

ぽこ

ぽこ

XHTMLのソースはどうやって使うのでしょうか?
初心者ですみません。

2009年05月21日 17:52

MIYA

MIYA

返事遅くなってすみませんでした。

preタグにjavascriptを使っているのですが、それが原因で表示が変になっていたと思います…
ご指摘ありがとうございました。

2009年01月09日 11:35

pipe

pipe

Javascriptの3行目あたりが変な表示になってません?
ほんとうだったら、
$("body").append("

"+$(this).attr('title')+"

");
ってなってるはずですよね。

2008年12月29日 23:26

MIYA

MIYA

見てみないと何とも言えないところばかりですが、確認する点としては
●jQueryと今回紹介してるスプリクトはちゃんと読み込めているのか。
●デモページの様にaタグ内にtitleで記述はちゃんとできているのか。

この点をもう一度注意してみれば良いかと思います。
けっこう簡単に使えちゃうのでどこかのボンミスだと思いますよ。

2008年11月20日 00:28

sato

sato

このサンプルを使わせて頂こうと、トライしていますが、
うまくいきません…。

ヘッダ内で、jQueryを読みこませ、上記のJavascriptを貼り付けましたが、サンプルのようになりません。

考えられる原因はありますでしょうか?

2008年11月19日 19:24

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article