Cara Membuat Bubble Tooltips Dengan CSS Seri 2 - Sharing Ilmu Pengetahuan | Ianhacks
Headlines News :
Home » , » Cara Membuat Bubble Tooltips Dengan CSS Seri 2

Cara Membuat Bubble Tooltips Dengan CSS Seri 2

Written By Rian on 8.09.2012 | Thursday, August 09, 2012

Seperti pada umumnya bila hanya menggunakankode CSS, maka pembuatan Bubble Tooltips ini jadi lebih mudah. Lihatlah screenshots Bubble Tooltips yang dimaksud dalam tutorial ini.

Cara membuatnya adalah seperti berikut ini :

1. Pertama masuk ke Edit HTML.
2. Carilah tag </head>

3. Letakkan di atas tag </head> ini
kode css berikut lalu simpan template Anda.

<style type="text/css">

p {
margin: 15px 0;
padding: 5px;
}

p a {
position: relative;
color: #000;
text-decoration: none;
}

a span {
display: none;
}

a:hover {font-size: 100%;} /* IE/Win requires some link change on hover in order to show the tooltips */

a:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
opacity:1.0;
z-index:10;
top: 5px;
left: 40px;
width: 220px;
border: 2px solid #f00;
-moz-border-radius: 0px 8px 0px 8px;
background-color: #ffff00;
color: #f00;
padding: 10px;
font-size: 12px;
}

p.test a }

</style>



KETERANGAN :

Anda bisa sesuaikan warna border, warna background dan warna teksnya dengan warna yang Anda sukai.

4. Penggunakan kode pada linknya,
awali dengan kode <p class="test"> sebelum link yang Anda miliki.


Contohnya jadi seperti ini :

<p class="test">
<a target="_blank" href="URL link Anda">Judul link<span>Teks kalimat tooltips</span></a></p>


Selamat mencoba, good luck!


x_3bfae512
Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

 
Support : Proudly powered by Blogger
Copyright © 2011. Sharing Ilmu Pengetahuan | Ianhacks - All Rights Reserved
Original Design by Creating Website Modified by IanBlack