CSS
a { position: relative; cursor: pointer; font: normal normal 85% sans-serif; color: white; text-shadow: #090A0B 0 -1px; display: inline-block; } a > i { text-align: center; font: italic normal 90% Georgia, serif; line-height: 150%; color: black; text-shadow: white 0 1px; background: #DDD; background-clip: padding-box; box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5); border: 5px solid #111; border: 5px solid rgba(0, 0, 0, 0.5); border-radius: 3px; position: absolute; width: 350px; left: 50%; margin-left: -175px; /* 50% szerokości diva */ padding: 10px 0; bottom: 100%; margin-bottom: 10px; visibility:hidden; opacity:0; -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } a > i:before, a > i:after { content: ""; position: absolute; border-left: 10px solid transparent; border-right: 10px solid transparent; top: 100%; left: 50%; margin-left: -10px; } a > i:before { border-top: 10px solid #111; border-top: 10px solid rgba(0, 0, 0, 0.5); margin-top: 5px; } a > i:after{ border-top: 10px solid #DDD; margin-top: -2px; z-index: 1; } a:hover > i { visibility: visible; opacity: 1; }HTML
<a>Tooltip<i>This tootips's arrow also has a border.<br />Pure CSS!<br /> <img src="http://placehold.it/350x50"> </i></a>
http://cssdeck.com/labs/css3-tooltip
Sekian dulu ^_^ hehe maaf kalau nggak bermanfaat.
7 comments
ane coba ya gan,Thanks for share
23 April 2014 at 22:59Silahkan gan :) semoga berhasil |o|
24 April 2014 at 01:31Memang keren ya CSS3 :)
28 April 2014 at 15:00Penciptanya pasti punya imajinasi tinggi :)
5 May 2014 at 05:15Pasti mendesainnya pusing ketika pertama kali, tapi entah juga, hehe :D
7 May 2014 at 15:26ahaha lucu gan :-d top
19 May 2014 at 22:35makasih mas :)
19 September 2014 at 15:31Don't give us spam and active link.