Sexy And Simple Css3 Tool Tip

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style type="text/css"> /** * Tooltip */ .tooltip, li > .tooltip, a > .tooltip, span > .tooltip { opacity: 0; margin-top: -10px; visibility: hidden; margin-left: -65px; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.5s, 0.3s, 0.5s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in; } .tooltip, li:hover > .tooltip, a:hover > .tooltip, span:hover > .tooltip, a .tooltip:hover, span .tooltip:hover, li .tooltip:hover, div .tooltip:hover { opacity: 1; visibility: visible; overflow: visible; margin-top: 30px; display: inline; margin-left: -40px; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.5s, 0.3s, 0.5s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, margin-left; -o-transition-duration:0.5s, 0.3s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.5s, 0.3s, 0.5s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } .tooltip { background: #FFFBCF; background: -moz-linear-gradient(top, #FFFBCF 0%, #FFFCDF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFBCF), color-stop(100%,#FFFCDF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFBCF', endColorstr='#FFFCDF',GradientType=0 ); border: 1px solid #EFE795; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 10px; margin-left: -40px; position: absolute; font-family: Arial; font-size: 12px; text-decoration: none; font-style: normal; color: #777; text-shadow: 1px 1px 0 rgba(255,255,255,0.75); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; -o-box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 #fff; z-index: 10; } .tooltip span { /* Triangle */ background: #FFFBCF; border: 0; border-top: 1px solid #EFE795; border-right: 1px solid #EFE795; width: 10px; height: 10px; margin-left: 2px; margin-top: -42px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; } </style>

Markah Html

<a href="#naga#">Lorem ipsum — the content of the link <span class="tooltip"> — start of the tooltip <span></span> — this is for the triangle, only cosmetic <br>Lorem ipsum dolor sit amet — the content of the tooltip</span>— end of the tooltip</a> per  himenaeos.</p>

Arahkan cursor ke link ini Lorem ipsum — the content of the link — start of the tooltip — this is for the triangle, only cosmetic
Lorem ipsum dolor sit amet — the content of the tooltip— end of the tooltip per himenaeos.

Selamat Mencoba

credit: dreamcoloronline