Tooltip On Mousemove

Highlighted
New Member
10 0 0

Hello,

I would like a tool tip to appear over a picture. I have the code below. It works, only problem is, the bubble does not move with the mouse. How can I do that?

Thanks,

 

<head>
<style>
[data-tooltip] {
position: realtive;
cursor: default;
}
 
[data-tooltip]::after {
position: relative;
width: 140px
left: calc(50% - 70px);
bottom: 125%;
text-align: center;
box-sizing: border-box;
 
content:attr(data-tooltip);
 
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.75);
padding: 8px;
border-radius: 10px;
font-site: 0.9em;
font-weight: bold;
 
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.2s;
 
}
[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
transform: translateY(0);
 
</style>
 
</head>
 
<body>
<span data-tooltip="Actual tooltip text">Seeable text</span>
</body>
0 Likes