Tooltip CSS Pada Hover DIV HTML Element

Hari ini kita akan membuat Tooltip CSS On Hover DIV HTML Element dengan menggunakan :before dan :after elemen. Mudah untuk menyesuaikan hanya dengan mengedit CSS.

Lebih jauh lagi, ini memungkinkan pengguna untuk mengarahkan mouse ke Tooltip sehingga Anda menempatkan segala jenis tautan di atas tooltip dan pengguna dapat dengan mudah mengkliknya.

Selain itu, Anda dapat dengan mudah mengubah elemen div dan menyesuaikan latar belakang tooltip, mengubah font, dan menerapkan segala jenis properti CSS.

Awalnya, Tooltips dibuat dengan Javascript tetapi sekarang kita dapat dengan mudah membuatnya dengan CSS murni dan juga menganimasikannya dengan menggunakan animasi CSS3 dan banyak properti lainnya.

Tooltip sangat menyenangkan untuk menampilkan lebih banyak info untuk memberi tahu saya pengguna dengan cepat. Ini ringan, kompatibel lintas-browser, dan mudah digunakan.

Cara Membuat Tooltip CSS Pada Elemen DIV Hover

Pertama-tama kita akan membuat markup HTML yang sederhana dan mudah dimengerti. Kami memiliki nama kelas div wrapper dan menulis teks di dalamnya.

Selanjutnya, kami memiliki div anak dengan nama kelas tooltip yang menahan teks yang akan saya tampilkan saat Anda mengarahkan mouse ke div pembungkus.

<div class="wrapper">         I have a tooltip.        <div class="tooltip">I am a tooltip!</div> </div> 

Setelah itu kita akan menulis kode CSS. Pertama, kita harus mendesain elemen pembungkus dan menambahkan beberapa gaya agar terlihat bagus dan bersih.

Tidak ada yang rumit di sini. Semua kita akan menambahkan beberapa background-color, font-size, padding dan beberapa properti CSS lainnya.

.wrapper {   text-transform: uppercase;   background: #ececec;   color: #555;   cursor: help;   font-size: 20px;   margin: 0 auto;   padding: 15px 20px;   position: relative;   text-align: center;   width: 230px;   -webkit-transform: translateZ(0); /* webkit flicker fix */   -webkit-font-smoothing: antialiased; /* webkit text rendering fix */ } 

Demikian pula, Di sini kita akan melakukan hal yang sama seperti yang telah kita lakukan dengan pembungkus utama tetapi di sini kita akan menggunakan posisi absolute untuk membuatnya tetap tersembunyi. Kami juga menggunakan terjemahan dan transisi untuk membuatnya beranimasi saat mengarahkan kursor.

.wrapper .tooltip {   background: #1496bb;   bottom: 100%;   color: #fff;   display: block;   left: 0;   margin-bottom: 15px;   opacity: 0;   padding: 20px;   pointer-events: none;   position: absolute;   width: 100%;   -webkit-transform: translateY(10px);   -moz-transform: translateY(10px);   -ms-transform: translateY(10px);   -o-transform: translateY(10px);   transform: translateY(10px);   -webkit-transition: all .25s ease-out;   -moz-transition: all .25s ease-out;   -ms-transition: all .25s ease-out;   -o-transition: all .25s ease-out;   transition: all .25s ease-out;   -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);   -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);   -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);   -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); } 

Itu :before elemen akan membantu kami menampilkan tooltip saat mengarahkan kursor.

/* This bridges the gap so you can mouse into the tooltip without it disappearing */ .wrapper .tooltip:before {   bottom: -20px;   content: " ";   display: block;   height: 20px;   left: 0;   position: absolute;   width: 100%; } 

Dengan bantuan :after elemen, kita dapat dengan mudah membuat indikasi panah bawah.

/* CSS Triangles - see Trevor's post */ .wrapper .tooltip:after {   border-left: solid transparent 10px;   border-right: solid transparent 10px;   border-top: solid #1496bb 10px;   bottom: -10px;   content: " ";   height: 0;   left: 50%;   margin-left: -13px;   position: absolute;   width: 0; } 

Mari terapkan beberapa animasi on-hover stats dengan menggunakan properti transform.

.wrapper:hover .tooltip {   opacity: 1;   pointer-events: auto;   -webkit-transform: translateY(0px);   -moz-transform: translateY(0px);   -ms-transform: translateY(0px);   -o-transform: translateY(0px);   transform: translateY(0px); } 

Terkadang kami telah melihat masalah transisi di IE, jadi kami akan menonaktifkannya di versi IE yang lebih lama.

/* IE can just show/hide with no transition */ .lte8 .wrapper .tooltip {   display: none; } .lte8 .wrapper:hover .tooltip {   display: block; } 

Itu dia. Silakan lihat demo dan sesuaikan agar sesuai dengan proyek Anda.