Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BUAT TOOLTIP DENGAN CSS |
| October 18, 2009 Posted by: Fauzie |
Tooltip adalah element "graphical user interface". Cara menggunakannya ialah dengan meng"hover" cursor ("mouse pointer") ke atas sesuatu item, perkataan atau ayat dan maklumat tambahan akan "pop-up" dengan tanpa diklik pada perkataan, item atau ayat tersebut.
Pada peringkat awalnya, tooltip telah dipopularkan oleh aplikasi Microsoft dan kini penggunaannya telah pun meluas baik dalam blog mau pun dalam website.
Tooltip boleh menggandungi teks biasa (plain texts) atau HTML seperti image, table dan seumpamanya.
Kebanyakan tooltip dibina dengan menggunakan javascript atau jQuery dan tidak mudah untuk membuatnya.
Dalam rencana ini saya ingin menunjukkan cara mudah membina tooltip dengan menggunakan CSS dan tooltip yang dibina dengan cara ini tidak kurang hebatnya.
Di sini saya akan tunjukkan 2 contoh tooltip yang dibuat dengan CSS.
Contoh 1
CSS Tooltip-Teks Dalam Kotak
Dalam contoh pertama ini, teks (descriptive texts) telah diletakkan di bahagian dalam element. Sila hover mouse pada perkataan berwarna biru dan tooltip akan pop-up.
Herbalism is a traditional medicine or folk medicineHealing practices to much of the population in a culture and practiced by anyone in the culture practice based on the use of plants and plants extracts. Herbalism is also known as botanical medicine, herbology, and phytotherapyThe study of the use of extracts from natural origin as medicine or healing-promoting agents. The scope for herbal medicine is sometimes extended to include fungal and bee products, as well as minerals, shells, and certain animal parts.
Kod CSS dan kod HTML untuk contoh tooltip di atas adalah seperti berikut. Kod-kod berwarna maroon adalah kod CSS dan kod-kod berwarna biru pula adalah kod HTML.
<html>
<head>
<style type='text/css'>
a.tooltip_1{
position:relative;
text-decoration:none;
}
a.tooltip_1:hover{
background-color:#FFFFFF;
}
a.tooltip_1 span{
display:none;
}
a.tooltip_1:hover span{
display:block;
position:absolute;
z-index:20;
top:1.4em;
left:2em;
width:150px;
border:5px solid gold;
background-color:#fff;
color:#000;
padding:5px;
-moz-box-shadow: 7px 7px 7px #666;
-webkit-box-shadow: 7px 7px 7px #666;
box-shadow: 7px 7px 7px #666;
}
</style>
</head>
<body>
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; width: 500px; text-align: left;">Herbalism is a traditional medicine or <a href="#nogo" class="tooltip_1">folk medicine<span>Healing practices to much of the population in a culture and practiced by anyone in the culture</span></a> practice based on the use of plants and plants extracts. Herbalism is also known as botanical medicine, herbology, and <a href="#nogo" class="tooltip_1">phytotherapy<span>The study of the use of extracts from natural origin as medicine or healing-promoting agents</span></a>. The scope for herbal medicine is sometimes extended to include fungal and bee products, as well as minerals, shells, and certain animal parts.
</div>
</body>
</html>
<head>
<style type='text/css'>
a.tooltip_1{
position:relative;
text-decoration:none;
}
a.tooltip_1:hover{
background-color:#FFFFFF;
}
a.tooltip_1 span{
display:none;
}
a.tooltip_1:hover span{
display:block;
position:absolute;
z-index:20;
top:1.4em;
left:2em;
width:150px;
border:5px solid gold;
background-color:#fff;
color:#000;
padding:5px;
-moz-box-shadow: 7px 7px 7px #666;
-webkit-box-shadow: 7px 7px 7px #666;
box-shadow: 7px 7px 7px #666;
}
</style>
</head>
<body>
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; width: 500px; text-align: left;">Herbalism is a traditional medicine or <a href="#nogo" class="tooltip_1">folk medicine<span>Healing practices to much of the population in a culture and practiced by anyone in the culture</span></a> practice based on the use of plants and plants extracts. Herbalism is also known as botanical medicine, herbology, and <a href="#nogo" class="tooltip_1">phytotherapy<span>The study of the use of extracts from natural origin as medicine or healing-promoting agents</span></a>. The scope for herbal medicine is sometimes extended to include fungal and bee products, as well as minerals, shells, and certain animal parts.
</div>
</body>
</html>
"-moz-box-shadow" memberi effect bayang pada kotak tooltip.
-moz-box-shadow: 7px 7px 7px #666;
-webkit-box-shadow: 7px 7px 7px #666;
box-shadow: 7px 7px 7px #666;
Perhatikan bagaimana perkataan yang dirujuk dan maklumat dalam tooltip diletakkan.
<a href="#nogo" class="tooltip_1">folk medicine<span>Healing practices to much of the population in a culture and practiced by anyone in the culture</span></a>
"folk medicine" adalah perkataan dirujuk. dan teks "Healing practices to much of the population in a culture and practiced by anyone in the culture" adalah teks yang berada dalam kotak tooltip. "#nogo" merujuk kepada tiada link untuk teks dalam kotak apabila diklik.
Contoh 2
CSS Tooltip-Teks Di dalam "Bubble"
Untuk contoh kedua, teks berada di dalam "speech bubble". Speech bubble ini dibuat dengan menggunakan 2 image latar belakang yang diletakkan pada 2 element "kosong" (empty) yang berasingan iaitu <b> dan <em>
Image yang digunakan adalah seperti berikut:
 | Image bahagian atas |
 | Image bahagian bawah |
Sila hover mouse ke atas perkatan yang berwarna biru dan anda akan dapati bubble speech akan "popup".
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
Lorem Ipsum è considerato tipografo prese una cassetta di caratteriinsieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Lorem Ipsum è considerato tipografo prese una cassetta di caratteriinsieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Kod-kod CSS dan HTML untuk contoh tooltip di atas adalah seperti berikut:
<html>
<head>
<style type="text/css">
a.csstool_tip_2{
position:relative;
_display:inline-block;
text-decoration:none;
}
a.csstool_tip_2 span{
display:none;
}
a.csstool_tip_2:hover{
background-color:#FFFFFF;
}
a.csstool_tip_2:hover span{
display:block;
position:absolute;
z-index:20;
bottom:1em;
left:1em;
width:200px;
color:#000;
}
a.csstool_tip_2 span b{
display:block;
height:10px;
background:url(http://css.flepstudio.org/images/css_tooltip_top.gif) no-repeat bottom;
}
a.csstool_tip_2 span em{
display:block;
height:32px;
background:url(http://css.flepstudio.org/images/css_tooltip_bot.gif) no-repeat;
}
a.csstool_tip_2 span i{
display:block;
background-color:#fffbcc;
border-left:1px solid #ffcc01;
border-right:1px solid #ffcc01;
padding:0 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; width: 500px; text-align: left;"> Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.<br />
Lorem Ipsum è considerato tipografo prese una cassetta di <a href="#nogo" class="csstool_tip_2">caratteri<span><b></b><i>insieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico</i><em></em></span></a> e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla <a href="#nogo" class="csstool_tip_2">videoimpaginazione<span><b></b><i>composizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni</i><em></em></span></a>, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</div>
</body>
</html>
<head>
<style type="text/css">
a.csstool_tip_2{
position:relative;
_display:inline-block;
text-decoration:none;
}
a.csstool_tip_2 span{
display:none;
}
a.csstool_tip_2:hover{
background-color:#FFFFFF;
}
a.csstool_tip_2:hover span{
display:block;
position:absolute;
z-index:20;
bottom:1em;
left:1em;
width:200px;
color:#000;
}
a.csstool_tip_2 span b{
display:block;
height:10px;
background:url(http://css.flepstudio.org/images/css_tooltip_top.gif) no-repeat bottom;
}
a.csstool_tip_2 span em{
display:block;
height:32px;
background:url(http://css.flepstudio.org/images/css_tooltip_bot.gif) no-repeat;
}
a.csstool_tip_2 span i{
display:block;
background-color:#fffbcc;
border-left:1px solid #ffcc01;
border-right:1px solid #ffcc01;
padding:0 5px;
}
</style>
</head>
<body>
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; width: 500px; text-align: left;"> Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.<br />
Lorem Ipsum è considerato tipografo prese una cassetta di <a href="#nogo" class="csstool_tip_2">caratteri<span><b></b><i>insieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico</i><em></em></span></a> e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla <a href="#nogo" class="csstool_tip_2">videoimpaginazione<span><b></b><i>composizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni</i><em></em></span></a>, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</div>
</body>
</html>
