Tooltip Sederhana

Tooltip Sederhana

Tooltip Sederhana

Tanpa basa basi langsung saja ke poinnya, sebelumnya lihat demo dulu.


DEMO
infoalya.com


1. Login ke akun web/blog anda
2. Klik template dan dilanjutkan dengan edit HTML
3. Cari kode ]]></b:skin> atau  </style>
4. Copy dan paste kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> (gunakan ctrl+F untuk mempermudah pencarian)


/* Tooltip */  a:link, a:visited { position:relative; } .bgttooltip { width:300px; position:absolute; bottom:100%; margin:0 0 7px 0; padding:5px; font-family:Verdana,sans-serif; font-size:13px; font-weight:normal; font-style:normal; text-align:left; text-decoration:none; text-shadow:0 1px 0 rgba(255,255,255,0.3); line-height:1.5; border:solid 1px; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.5) inset; cursor:default; display:block; visibility:hidden; opacity:0; z-index:999; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -o-transition:all 0.4s linear; transition:all 0.4s linear; color:#2B2B2B; background:#2aa4cf; background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); background: #2aa4cf; border-color:#2aa4cf; } .bgttooltip:before, .bgttooltip:after { width:0; height:0; position:absolute; bottom:0; margin:0 0 -20px -10px; border:solid 10px; border-color:transparent; display:table-cell; content:""; } .bgttooltip:before { margin:0 0 -24px -12px; border:solid 12px; border-color:transparent; z-index:-1; } a:hover .bgttooltip { text-decoration:none; visibility:visible; opacity:1; -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .bgttooltip, .bgttooltip.left { left:0; right:0; } .bgttooltip:before, .bgttooltip:after, .bgttooltip.left:before, .bgttooltip.left:after { left:40px; right:auto; } .bgttooltip:before { border-top-color:#2aa4cf; } .bgttooltip:after { border-top-color:#2aa4cf; } /* Tooltip Provided by samhidayat */

5. Simpan template


Untuk memanggil kode tersebut gunakan kode dibawah ini, (dapat diletakkan dimanapun sesuka anda, di laman, posting ataupun sebagai gadget/widget)


1. Menampilkan teks dengan link
<a href="Link tujuan">Teks anda yang tampil <span class="bgttooltip">Teks dalam tooltip anda</span></a>

2. Menampilkan gambar dengan link
<a href="Link Tujuan"><img src="URL gambar" height="300" width="300" /><span class="bgttooltip">Teks anda disini</span></a>


Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×