Source Code Tooltip Image on Hover dengan HTML CSS

Post a Comment
Source Code Tooltip Image on Hover dengan HTML CSS

Source Code kali ini merupakan code sederhana namun masih banyak orang yang kebingungan tentang bagaimana cara menampilkan sebuah tooltip pada saat gambar/div di hover. nah pada script ini bisa kalian kembangkan sendiri pada website kalian dengan menggunakan code tooltip ini. Source code kali ini hanya menggunakan HTML dan Pure CSS jadi tidak akan membebankan web anda saat digunakan karena tanpa javascript. Langsung saja berikut kodenya.

KODE HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Tooltip Image on Hover - GreyTekno</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="avatar" data-tooltip="Example Tooltip">
    </div>
</body>
</html>


KODE CSS:

*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.avatar {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: url('https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png ');
background-size: cover;
background-position: center;
position: relative;
cursor: pointer;
}
.avatar::before,
.avatar::after {
--scale: 0;
--tooltip-color: #333;
--arrow-size: 10px;
position: absolute;
content: '';
top: -.25rem;
left: 50%;
transform: translateX(-50%) translateY(var(--translate-y, 0)) scale(var(--scale));
transition: 150ms transform;
transform-origin: bottom center;
}
.avatar::before {
--translate-y: calc(-100% - var(--arrow-size));
content: attr(data-tooltip);
color: white;
padding: 1rem 2rem;
width: max-content;
max-width: 100%;
background: var(--tooltip-color);
border-radius: 50px;
text-align: center;
}
.avatar:hover::before,
.avatar:hover::after {
--scale: 1;
}
.avatar::after {
--translate-y: calc(-1 * var(--arrow-size));
content: '';
border: var(--arrow-size) solid transparent;
border-top-color: var(--tooltip-color);
transform-origin: top center;
}
Klik tombol dibawah ini untuk melihat Demo Hasilnya

Sekian postingan Source Code Tooltip Image on Hover dengan HTML CSS, semoga bermanfaat. Jika ada pertanyaan silahkan tanyakan pada kolom komentar. Terimakasih.

Related Posts

Post a Comment