titleタグを使わずにspanタグでツールチップに表示したい文章を入れておきます。
spanタグは非表示にしておいて、マウスオーバーしたときに表示する。
CSSバージョンもあります。＞＞＞CSSでツールチップを表示します。
デモページへopen_in_new
JSを読み込みます
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
|
[tooltip.js]JavaScript
$(function(){
$("span.tip").prepend("<img src=\"point.gif\" alt=\"\" />").css({
position:"absolute",
display:"none"
});
$("a.tip").mouseover(function(){
$("+span.tip",this).show();
}).mouseout(function(){
$("+span.tip",this).hide();
}).mousemove(function(e){
$("+span.tip",this).css({
"top":e.pageY+40+"px",
"left":e.pageX+-10+"px"
});
});
});
|
HTMl
<p>ツールチップ表示の<a href="#" class="tip">デモリンクはここ</a><span class="tip">ここにツールチップテキストをいれる</span>です。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>
<p>
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示の<a href="#" class="tip">デモリンクはここ</a><span class="tip">ここにツールチップテキストをいれる<br />
ここにツールチップテキストをいれる</span>です。<br />ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>
|
CSS
span.tip {
padding: 5px;
color:#000000;
text-decoration:none;
background-color:#FFFFCC;
border: 1px solid #69F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999;
background:#FFFFCC url('point.gif') no-repeat -10px -10px;
}
span.tip img{
position:absolute;
top:-10px;
left:10px;
}
|