.tooltip { position: relative; background: none; 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: #D580FE; 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 #D580FE; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltip span:before { border-top-color: #ccc; bottom: -8px; }
$(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('.tooltip').mouseover(function(){ $(this).children('span').show(); }).mouseout(function(){ $(this).children('span').hide(); }) } });
<center> <a href="http://aiizahh.blogspot.com/2013/04/cute-spinny-leaf-untuk-tampilan-menu.html" class="tooltip"> Ini isi text 1 <span>Ini deskripsi dari kalimat tersebut, bisa diisi dengan kalimat sesuka hati</span> </a><br /> <a href="http://aiizahh.blogspot.com/2013/04/cute-spinny-leaf-untuk-tampilan-menu.html" class="tooltip"> Ini isi text 2 <span>Ini deskripsi dari kalimat tersebut, bisa diisi dengan kalimat sesuka hati</span> </a><br /> <a href="http://aiizahh.blogspot.com/2013/04/cute-spinny-leaf-untuk-tampilan-menu.html" class="tooltip"> Ini isi text 3 <span>Ini deskripsi dari kalimat tersebut, bisa diisi dengan kalimat sesuka hati</span> </a><br /> <a href="http://aiizahh.blogspot.com/2013/04/cute-spinny-leaf-untuk-tampilan-menu.html" class="tooltip"> Ini isi text 4 <span>Ini deskripsi dari kalimat tersebut, bisa diisi dengan kalimat sesuka hati</span> </a><br /> <a href="http://aiizahh.blogspot.com/2013/04/cute-spinny-leaf-untuk-tampilan-menu.html" class="tooltip"> Ini isi text 5 <span>Ini deskripsi dari kalimat tersebut, bisa diisi dengan kalimat sesuka hati</span> </a><br /> </center>