السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
apa kabar semua ? ^_^
berjumpa lagi dengan saya, admin codingpintar ^_^
berjumpa lagi dengan saya, admin codingpintar ^_^
semoga sehat semua yah, dan masih semangat untuk belajar coding nya heheh ^_^
nah, pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Tooltip Dengan CSS.Kalian pasti pada tau kan apa itu tooltip ? Ya. Tooltip adalah sebuah dialog kecil yang muncul ketika pointer mouse di arahkan ke sebuah elemen atau biasa di sebut ( Hover ).
Oke langsung saja di simak tutorial Cara Membuat Tooltip Dengan CSS.
1. Membuat File HTML
seperti biasa silahkan anda siapkan file HTML bernama index.html, lalu ketikkan script berikut ini .
<!DOCTYPE html>
<html>
<head>
<title>Tooltip</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a class="tooltips" href="#">Arahkan Mouse Kesini<span>Ini Adalah Tooltip </span></a>
</body>
</html> jika file htmlnya sudah anda buat coba anda jalankan telebih dulu,
ya benar hasilkan akan menampilkan semua teks yaitu " Arahkan Mouse KesiniIni Adalah Tooltip ", itu di karenakan kita belum membuat file cssnya, Silahkan ikuti langkah selanjutnya
2. Membuat File CSS
file css inilah file yang ter penting hehe ^_^, silahkan buat file cssnya bernama style.css, dan ketikkan script berikut .
a.tooltips {
position: relative;
display: inline;
text-decoration: none;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
border-radius: 5px;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.5;
top: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}Jika semua file sudah di buat maka akan menjadi seperti ini
Arahkan Mouse KesiniIni Adalah Tooltip
Bagaimana, sangat simple bukan :D
Silahkan anda coba dan kembangkan sesuka anda :D
sudah mungkin itu dulu yang dapat saya sampaikan, :)
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
Oh ini namanya tooltip ya , barusan tau gan. dulu cuma tau bentuknya ga tau namanya :D
Replywah bagus nih gan, kapan-kapan pingin coba. Izin bookmark ya gan!
Replymatur nuwun nih infonya
Tutorial After Effects: Membuat Animasi dan Kartun Sederhana
wah bagus nih gan, kapan-kapan pingin coba. Izin bookmark ya gan!
Replymatur nuwun nih infonya
bagus gan
Replywah sngt bermanfaat skali buat pljr kaya ane
ReplySy baru tau CSS itu apa. Maksih gan info ny ..
Replythanks gan berguna banget (Y)
Replyالسَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Replymas mungkin bisa di update infonya sedikit stelah kita menulis kode kode tersebut kemana arahan kode kode tersebut.
apakah di pasang di posst page atau gatget dan arrtikel ini sedikit kurang jelas apakah untuk blogger atau jomla atau word press, intinya supaya pembaca tahu cara penggunaaan, sepertinya tutorial ini untuk teman teman yang sudah tahu cara memasang tooltipnya terima kasih mas