Create an interactive tooltip with position fixed, dynamically updating it's left and top positions via pageX and pageY respectively, as your mouse moves :
document.addEventListener('mousemove', e => {
// "tooltip" here is your suspectconst tooltip = document.getElementById('tooltip');
// The mouse coordinates are your clue tooltip.style.left = `${e.pageX}px`;
tooltip.style.top = `${e.pageY}px`;
// Make the suspect... I mean, tooltip, visible tooltip.style.display = 'block';
});
Voila! Your tooltip now follows your cursor, courtesy of dynamic position updating. Want a bit of spacing between the cursor and the tooltip? Easy, just tweak the pageX and pageY offsets.
Digging Deeper: Finer Tooltip Controls
Offsetting and Displaying Tooltip
To minimize the risk of our tooltip potentially facing obstruction charges, let's give it a bit of offset:
// Keep 'em guessing with a hint of mysteryconst xOffset = 10;
const yOffset = 20;
document.addEventListener('mousemove', e => {
const tooltip = document.getElementById('tooltip');
// The perfect disguise... uh, I mean offset tooltip.style.left = `${e.pageX + xOffset}px`;
tooltip.style.top = `${e.pageY + yOffset}px`;
});
Ensuring our tooltip's innocence, it disappears when not in use, and only reveals itself during a mouse hover:
#tooltip {
display: none; // Poof! Now you see me, now you don't
position: fixed;
z-index: 1000;
}
.element:hover + #tooltip {
display: block; // Peekaboo! Here I am
}
Keeping It in Bounds
Our tooltip is a well-behaved citizen - it does not tread beyond its limits:
document.addEventListener('mousemove', e => {
const tooltip = document.getElementById('tooltip');
// Not today, boundary. Not today.const rightEdge = window.innerWidth - tooltip.offsetWidth;
const bottomEdge = window.innerHeight - tooltip.offsetHeight;
// Remain within bounds for the sake of harmony tooltip.style.left = `${Math.min(e.pageX + xOffset, rightEdge)}px`;
tooltip.style.top = `${Math.min(e.pageY + yOffset, bottomEdge)}px`;
});
Rich Content and Styling
Who said tooltips can't look dashing and contain wisdom?
// A little bit of aesthetics, a lot of infoconst tooltipContent = "<strong>Flower details:</strong> <em>Fragrant</em>";
tooltip.innerHTML = tooltipContent;
And the best part, it cleans up real good:
#tooltip {
background-color: #fffced;
border: 1px solid #f5e6a8;
border-radius: 6px; // Rounded edges for that perfect curve
padding: 8px; // Comfortable, but minimalist
white-space: nowrap; // Keep it neat and tidy
}
With Interactive Elements
For the extra mile, our tooltip associates itself with elements closely, almost like best buddies:
<a href="#"data-tooltip-content="More about us">About Us</a>
// Get all elements with tooltip content and befriend themdocument.querySelectorAll('[data-tooltip-content]').forEach(elem => {
elem.addEventListener('mouseenter', e => {
const tooltip = document.getElementById('tooltip');
// Tooltip gets chatty with its friend tooltip.innerHTML = e.target.getAttribute('data-tooltip-content');
tooltip.style.display = 'block';
});
// But knows when to go silent elem.addEventListener('mouseleave', () => {
const tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
});
});
Power-ups for Your Tooltip
Containing Overflows and Managing Z-index
These CSS properties are your power-ups for smooth tooltip layering and visibility:
#tooltip {
overflow: hidden; // Notorious overflow, contained!
z-index: 1000; // Rise above them all
}
With position: relative applied to an element, it aids akin to a lighthouse for absolutely placed descendants.
Emoji and Unicode Galore
Why not add some emojis or Unicode symbols in your tooltips for that extra razzle-dazzle?
<div data-tooltip-content="✅ Mark as done">Task</div>
Pseudo-element Mastery with CSS
Use ::after pseudo-elements for minimalist, JS-free tooltips:
.element:hover::after {
content: attr(data-tooltip-content);
position: absolute;
display: block; // Tada! Here's your tooltip
/* Further styling */}
Guaranteeing a Cross-device Experience
Tooltips need to be just as friendly on mobile. So they've learnt to respond to touch events:
element.addEventListener('touchstart', showTooltipFunction); // I feel.. something? Oh, it's a touchelement.addEventListener('touchend', hideTooltipFunction); // And... it's gone!
Now your tooltip can provide a consistent experience across devices.
