Modifikasi tooltip menggunakan CSS (Cascading style sheets)

Pujangga Blogs

02 January 2011

Modifikasi tooltip menggunakan CSS (Cascading style sheets)

Kalo kita perhatikan,sudah banyak sekali Blogger atau diluar sana yang memberikan tutorial modifikasi Tooltip dengan menggunakan plugin javascript tetapi tidak banyak dari mereka menjelaskan apa yang
sebenarnya terjadi di dalam logika tooltip.Dan pada hari ini saya akan mencoba berbagi apa yang telah saya dapatkan sampai saat ini tentang modifikasi tooltip dengan menggunakan CSS3.
Kemajuan CSS memungkinkan kita untuk menghasilkan tooltipsErrorTooltipsyang berfungsi sebagai Deskripsi pesan atau informasi singkat dari kata atau kalimat tersebut. yang indah dan tampil beda dengan yang lain. Ini adalah salah satu mekanisme yang paling umum untuk menyediakan rincian tambahan di luar apa yang dapat Anda lihat di halaman tooltipsErrorTooltipspola desain untuk menampilkan tips tentang elemen tertentu pada layar.Dengan demikian, kita akan melihat bagaimana menggunakan standar CSS yang kini sudah mulai berkembang dapat meningkatkan dan memodifikasi tampilan halaman web dan tooltips yang indah seperti apa yang akan kita bahas pada artikel ini.
Dalam contoh ini, kita akan menghasilkan tooltip murni CSS yang secara estetika mekanismenya ditingkatkan menggunakan CSS3 (dengan maksud untuk mencapai beberapa tujuan yang lebih tinggi).Apakah ini berarti bahwa ia akan bekerja pada browser yang tidak mendukung CSS3 (seperti Internet Explorer 8 dan di bawahnya)?Mekanisme ini tentu saja tetap bekerja,Hanya saja tidak terlihat lebih cantik dan sedikit tidak sesuai dibanding dengan Browser yang telah mendukung CSS3,Konsep ini dikenal sebagai peningkatan progresif pada tampilan akhir.

Modifikasi tooltip dengan berbagai jenis.
Untuk memberikan kesan berbeda,disini saya mencoba memberikan 5 macam keragaman tooltip yang di sesuaikan dengan kondisi dan pesan dari jenis tooltip itu sendiri seperti contoh dengan mengarahkan kursor pada tulisan dibawah ini.
HelpHelpHelpIni hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah! , Classicni hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah!, CriticalErrorCriticalIni hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah! , InformationInformationInformationIni hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah! ,and WarningWarningWarningIni hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah! CSS powered tooltip,Ini hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah!
Yang kita butuhkan hanyalah serangkaian kode CSS untuk bisa menghasilkan kombinasi tooltip seperti diatas. Contoh dari kode CSS itu sendiri bisa anda lihat seperti dibawah ini.

<style type="text/css">
/*tootip*/
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic { background: #FFFFAA; border: 1px solid #FFAD33;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
.critical { background: #FFCCAA; border: 1px solid #FF3334;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
.help { background: #FF0000; border: 1px solid #993300;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;
}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
.warning { background: #FFFFAA; border: 1px solid #FFAD33;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;
}
.info1 {background: #9FDAEE; border: 1px solid #2BB0D7;border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
</style>

Contoh penulisan tooltip dengan menggunakan class="Custom info" pada postingan.

Kemajuan CSS memungkinkan kita untuk menghasilkan tooltips yang berfungsi sebagai Deskripsi pesan atau informasi singkat dari kata atau kalimat tersebut. yang indah dan tampil beda dengan yang lain.

Kemajuan CSS memungkinkan kita untuk menghasilkan <a class="tooltip" href="#">tooltips<span class="custom info"><img src="http://3.bp.blogspot.com/_VrWujqfSgyA/TR9s_QlMYgI/AAAAAAAAAcI/MHDzagCBAfw/s200/Info.png" alt="Error" height="48" width="48" /><em>Tooltips</em>yang berfungsi sebagai pengganti pesan atau informasi singkat dari kata atau kalimat tersebut.</span></a> yang indah dan tampil beda dengan yang lain.

Semoga bermanfaat.

2 comments:

Rumput Kebar on May 6, 2014 at 6:42 PM said...

makasih mas brow infonya

sherlina halim on September 15, 2015 at 8:25 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment