📝 Tooltips within Text using HTML and CSS!

**

Introducing My Simple Tooltip Component

**

Hey everyone! I'm thrilled to share a neat little project I've been working on: a custom tooltip component. I started with a design in Figma, focusing on a sleek and functional look, aiming to enhance text with informative pop-ups without cluttering the UI.

Check out the design:

The concept is simple: when you hover over certain text elements, a tooltip appears, offering additional information or context. This can be incredibly useful for user interfaces where space is at a premium but information density is still key.

How It Works
The magic happens with just HTML and CSS. Let's break down the code to understand how this tooltip works.

code

HTML Structure:
<div class="tooltip">
This is some cool text with a
<div class="itytooltip-wrapper">
<a href="#" class="itytooltip" first-tooltip="I’m a simple tooltip.">hover me</a>
</div>
tooltip. And guess what? Here's another
<div class="itytooltip-wrapper">
<a href="#" class="itytooltip" second-tooltip="I’m a tooltip, but I won't bite!">hover me</a>
</div>
give it a try.
</div>

In the above, .itytooltip-wrapper contains our tooltip triggers (the tags), with custom attributes (first-tooltip and second-tooltip) holding the tooltip text.

CSS Magic:

.itytooltip-wrapper .itytooltip:before,
.itytooltip-wrapper .itytooltip:after {
/* Initial state: hidden */
}

.itytooltip-wrapper .itytooltip:before {
/* Styling for the tooltip box */
}

.itytooltip-wrapper [second-tooltip]:before,
.itytooltip-wrapper [second-tooltip]:after {
/* Position adjustments for second tooltip */
}

.itytooltip-wrapper .itytooltip:hover:before,
.itytooltip-wrapper .itytooltip:hover:after {
/* Make tooltip visible on hover */
}

I've leveraged CSS pseudo-elements (:before and :after) for the tooltip content and tail, making them appear on hover by changing their visibility and opacity. Attributes like first-tooltip and second-tooltip are used to dynamically insert the tooltip text. This approach keeps the HTML clean and leverages CSS for the heavy lifting, offering both simplicity and style.

Try It Out
I encourage you to play around with this component, tweak it, and integrate it into your own projects. The beauty of web development lies in sharing and learning from each other. So, if you have any suggestions, improvements, or questions, feel free to drop them in the comments below!

📝 Tooltips within Text using HTML and CSS!

Code below 📄👩‍💻 pic.twitter.com/fzUwAfY5KX

— Itay Haephrati (@itaycode) March 23, 2024