JQを使って簡単に半透明なツールチップを表示させる方法です。
文章上の下線でマウスオーバーすると半透明なGIFが表示されます。
↓以下が実際のソースサンプルです。
▼JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$("span.tooltip").css({
opacity:"0.95",
position:"absolute",
display:"none"
});
$("a").mouseover(function(){
$("span.tooltip").fadeIn();
}).mouseout(function(){
$("span.tooltip").fadeOut();
}).mousemove(function(e){
$("span.tooltip").css({
"top":e.pageY+10+"px",
"left":e.pageX+10+"px"
});
});
});
</script>
▼CSS
<style>
body{
background:#000;
color:white;
}
a{
color:#00CCFF;
}
h1{
width:80%;
margin:10px auto;
}
p{
margin:10px 10%;
}
span.tooltip{
line-height:1.5;
color:white;
width:200px;
background:#FF9900;
border:2px solid white;
padding:1em;
font-size:small;
}
</style>
▼HTML
<body> <h1>半透明 tooltip_gif</h1> <p> 百獣の王といわれるライオンは、文字通り向うところ敵なし、つまりライオンを倒す相手がいないので王といわれています。 倒す相手がいなければ、地上はライオンで埋まるはずであります。ところが、ライオンの数は一向にふえません。アメリカライオンについて、アメリカのある学者が長年にわたって調査した結果でも、驚くべき事実として一部紹介されています。つまり彼らライオン達の数は、食べ物（他の動物）に比例して、けっして殖えないということです。これを逆にいえば、ライオンに食べられる動物達の数も一向に減らないという事実 <a href="#">半透明ツールチップ</a> <span class="tooltip">これは<br><strong></strong>GIFツールチップ</strong><br>プログラム</span>をも裏書きしているのであります。仮に、ライオンに食べられる動物達が百頭いたとします。すると、これを食べるライオンの数は、ライオンの生存を助ける数しか生かされていないということです。アメリカの学者は、アメリカライオンについて、自然の驚威（きょうい）である事実だけを述べ、それ以上のことは何一つ説明していませんが、こうした姿というものは、実は、自然が彼らを監視し、彼らをコントロールしているからに外なりません。</p> <p> すなわち、ライオンの数が殖えない理由は、ライオンの子が成長するまでに外の動物に食べられたり、死んだりして、その増殖率（ぞうしょくりつ）は草食動物の比ではないのです。こうみてきますと、何者にも襲われない成長したライオンはまさに王者であり、優雅（ゆうが）であり、特権階級（とっけんかいきゅう）のレッテルを貼ってもいいように思われますが、自然は、けっして不公平に扱ってはいません。彼らには飢（うえ）という苦しみが与えられています。彼らは獲物（えもの）をとるのに大変な苦労をします。時には何十日も飢との戦いを強いられます。そうして、ヘトヘトになって、やっと獲物にありつくというのが彼らの宿命です。彼らの一生は、飢との戦いにあるといってもいいでしょう。これはなにもライオンにかぎらず、肉食動物のなかば宿命でもあります。もっとも、ケニアのライオンは獲物に困ることがないほど、草食動物に恵まれていますが、しかしやたらと草食動物を食い荒すことはないのです。年老いた動物か、病気で弱っているものしか狙いません。いわば、自然淘汰（しぜんとうた）の動物しか相手にしません。</p> </body>
