2013/10/25 (更新日: 2016/08/13)

【初心者でも簡単】マウスオーバーでイケてるポップアップを表示する方法【JavaScript】

CSS PROGRAMMING

備忘録的なまとめです。
完成後のイメージは以下のとおり。

» マウスオーバー時にイケてるポップアップを表示するデモサイトはこちら

導入のながれ

JavaScriptで実装する
ポップアップさせたい文字をHTMLで記述する
ポップアップした文字をCSSでレイアウトを調整する
番外編：CSSのポップアップレイアウトがバグったときの対処法

ではまとめます㏄= ㏄=┌( ・_・)┘

１．マウスオーバーでのポップアップ機能をJavaScriptで実装する

以下をそのままコピペどうぞ。
それをheaderとかで読み込みます。


<script>
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("img","tooltip");
});
</script>

上記のままだと、すべてのimg要素にポップアップが表示されてしまいます。
しっかりclass指定を追記しましょう。

ポップアップ表示のclass指定を修正するには以下のコードをいじります。

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

例えば、上記コードを以下のように書き換えます。

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

２．ポップアップさせたい文字をHTMLで記述する

img要素のtitle属性に、ポップアップしたい文字を書き込みます。
具体例は以下のとおり。
<img src=""; title="ここにテキスト<br>ここにテキスト">

title要素内に改行を埋め込むのは正しい方法ではないですが力技です。。もし、改行がうまくいかなかったら<br>を<br />にしてみてください。

３．ポップアップした文字を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;
}

４．番外編：CSSのポップアップレイアウトがバグったときの対処法

以下、3ステップにまとめます。

① 以下のHTMLをコピペして、どこかに貼付ける。

<div class="tooltip">
	<p>ポップアップテキストの表示場所</p>
</div>

② CSSから以下のように『left: -9999px;』をコメントアウトする。

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;
}