文章上でマウスオーバーすると右側からツールチップが瞬間移動してきて表示されます。
↓以下が実際のソースサンプルです。
▼JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>$(function(){
$("p.tooltip").hide();
$("a").mouseover(function(){
$("p.tooltip").show().css({
"top":$(this).offset().top+"px",
"left":$(document).width()+"px"
});
$("p.tooltip:not(:animated)").animate({
left:$(this).offset().left+$(this).width()+"px"
},20,"swing");
}).mouseout(function(){
setTimeout(function(){
$("p.tooltip:not(:animated)").animate({
left:$(document).width()+"px"
},30,"linear",function(){
$(this).hide();
})
},50);
});
});
</script>
▼ CSS
<style type="text/css">
h1{
width:80%;
margin:10px auto;
}
p{
margin:10px 10%;
}
p.tooltip{
line-height:1.5;
color:white;
margin:0;
width:185px;
height:86px;
position:absolute;
padding : 10px 20px 20px 10px;
background:url("tooltip.png");
font-size:small;
}
* html p.tooltip{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='SWtooltip.png',sizingMethod='scale');
}
</style>
▼ＸＨＴＭＬ
<body> <h1>秒速ツールチップ</h1> <p> 動物によっては共食いによって、飢からのがれようとします。また共食いによって、彼らの全体の生存を維持 しています。このように、彼らはけっして特権階級でもなければ、優雅でもありません。一方、草食動物はどうか といいますと、この方は草木はふんだんに与えられていますから飢に困るということはありません。したがって、 放っておきますと、彼らの種族はどんどん殖えていきます。これを放っておくと、こんどは草木が枯れてしまいま す。草木が枯れれば、彼らの生存は覚束なくなってきます。そこで、草食動物と草木との調整役<a href="#">ツー ルチップ</a>を果たしているのが、ライオンをはじめとした肉食動物といってもいいのであります。草木は、群生 （ぐんせい）する草食動物の排泄物（はいせつぶつ）がその肥料となり、草木自体の生存を可能にしております。 卑近（ひきん）な例としては、花と蜜蜂（みつばち）や蝶（ちょう）の関係であります。蜜蜂や蝶は、花にある蜜 を求め、花は、蜜蜂や蝶の花粉を得て、花をより美しく咲かせます。このように、動物と草木の関係というものは 、たがいに相補いながら、自然の環境を保持しているのであります。</p> <p class="tooltip">これは<br> <strong>秒速</strong><br>ツールチップ</p> </body>
