 |
| tampilan tooltip dengan CSS baru |
Tooltip Bootstrap merupakan kotak pop-up kecil yang muncul ketika pengguna menggerakkan penunjuk mouse ke suatu elemen contohnya : button yang berisikan data-toggle tooltip. Untuk mengubah tooltip yang secara default akan muncul dalam background hitam, kamu perlu mengubahnya dengan membuat style CSS untuk bagian tooltip yang ingin kamu ubah.
Berikut adalah CSS tooltip yang bisa kamu ubah sesuai keinginan.
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
</style>
/* sumber : www.w3school.com */
Untuk demonya silahkan mengakses link demo di bawah ini.
Tidak ada komentar