Simple CSS Only Tooltip

Javascriptေတြ၊ jquery effect ေတြမလိုပဲ CSS တစ္မ်ဳိးထဲကိုအသံုးျပဳၿပီးဘေလာ့ပို႔စ္ေတြက link ေတြကို mouse တင္လိုက္ရင္ link နဲ႔ပတ္သတ္တာအနည္းငယ္ကိုရွင္းျပေပးတဲ့ box ေလးထည့္နည္းပါ။



အရင္ဆံုး Design – Edit HTML ကိုသြားၿပီး ]]></bskin> ကိုရွာပါ။ေတြ႕ၿပီဆိုရင္ သူ႕အေပၚမွာေအာက္က code ေတြကိုထည့္ေပးလိုက္ပါ။

.tooltip
{
position: relative;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

အေပၚကcodeထဲကအေရာင္နဲ႔ ျပေပးထားတဲ့ေနရာေတြမွာမိမိဘေလာ့ နဲ႔လိုက္တဲ့ အေရာင္ေျပာင္းေပးႏိုင္ပါတယ္။ၿပီးရင္ save template လုပ္ပါ။
ဒီtooltipကိုသံုးမယ္ဆိုရင္ေတာ့ ေအာက္ကနမူနာျပထားသလိုသံုးႏိုင္ပါတယ္။

<a href="YOUR LINK HERE" class="tooltip">

ဒီမွာtooltipသံုးမဲ့စာထည့္ပါ။

<span>ဒီမွာ tooltip box ထဲမွာေပၚမဲ့စာထည့္ပါ။</span>
</a>

အေပၚကနမူနာမွာ သံုးထားတဲ့ code ကေတာ့ ေအာက္မွာျပထားပါတယ္။

<b>Poetry</b> (from the <a href="http://en.wikipedia.org/wiki/Greek_language" class="tooltip" title="Greek language">Greek<span>Learn More About Greek Language</span></a> "<i>poiesis</i>" — "<i><span lang="el" xml:lang="el">ποίησις</span></i>" — with a broad meaning of a "making", seen also in such terms as "<a class="tooltip" href="http://en.wikipedia.org/wiki/Hemopoiesis" title="Hemopoiesis">hemo<i>poiesis</i><span>Learn More About Hemopoiesis</span></a>"; more narrowly, the making of poetry) is a form of literary art which uses the aesthetic qualities of language to evoke meanings in addition to, or in place of, the prosaic ostensible meaning.

---