An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Technology Review
- Web Designer Wall
- Six Revisions
- You The Designer
- Fuel Your Creativity
- Crazy Leaf Design
- 24 Ways
- Design Modo
- Web Resource Source
- Codrops
Help Webnuz
Referal links:
How To Make Tooltips.
ToolTips!
I wanted some tooltips for my website.
Problem was none of the online tutorials for tooltips actually behave like a tooltip, with the text following your mouse cursor.
I spent 3 hours figuring out how to make theme work the way I wanted.
I came up with something that:
- is much simpler than every other tutorial
- looks better than every other tutorial
HTML
Add a tooltip attribute to all the elements you want to have a tooltip.
The value of this attribute should be what you want the tooltip's text to be. You can use HTML here
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="style.css" /> <script src="index.js"></script> </head> <body> <a tooltip="Example Tooltip Text A" href="www.example.com">A</a> <a tooltip="Different<br>Tooltip<br>Text" href="www.otherExample.com">B</a> <a tooltip="Really Cool Site" href="f53.dev">C</a> </body></html>You are also going to need to link a javascript file somewhere
CSS
We need a very small amount of CSS to make our tooltip render right.
body { /* Required Stuff */ position: relative; /* Styling that fits tooltip example styling */ background: #1c1c1c;}#tooltip { /* Required Stuff */ position: absolute; pointer-events: none; z-index: 100; /* anything higher than the highest z index you use */ visibility: hidden; /* Example of how to style your tooltip */ background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); color: white; font-size: 1em; padding: 0.5em; border-radius: 1em;}JS
The meat of this is in the javascript so I will be breaking it down slower here.
If you put the script in the header like I recommended then all your code needs to be wrapped in this
addEventListener('DOMContentLoaded', () => { // Everything})We need to make our tooltip display and append it to the body
// Make our tooltiplet tooltip = document.createElement("span")tooltip.id = "tooltip"document.body.appendChild(tooltip)We add event listeners for all our elements that have a tooltip, calling a function that will handle everything
// add event listeners to elements that have a tooltipdocument.querySelectorAll("[tooltip]").forEach(element => { element.addEventListener("mouseenter", updateTooltip) element.addEventListener("mouseleave", updateTooltip) element.addEventListener("mousemove", updateTooltip)})Then we just need to make the function those event listeners were calling.
function updateTooltip(mouseEvent) { // Move tooltip to our current cursor position tooltip.style.top = mouseEvent.pageY+"px" tooltip.style.left = mouseEvent.pageX+"px" switch(mouseEvent.type) { case "mouseenter": // update text and show tooltip when we hover tooltip.innerHTML = this.getAttribute("tooltip") tooltip.style.visibility = "visible" break; case "mouseleave": // hide the tooltip when we are no longer above a tooltip element tooltip.style.visibility = "hidden" break; }}Conclusion and Demo
That is it!
You can play around with the code for this here
Original Link: https://dev.to/f53/how-to-make-tooltips-2oio
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To