Cara Membuat Tooltip Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

apa kabar semua ? ^_^
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

Cara Membuat Tooltip Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

0 Response to " Cara Membuat Tooltip Dengan CSS "

Posting Komentar