DEV Community

Marco
Marco

Posted on โ€ข Originally published at blog.disane.dev

Create tooltips quickly and easily

Create simple tooltips with HTML/CSS with minimal JavaScript? I'll show you how to do it ๐Ÿช„


You just want to create a tooltip in HTML/CSS and don't want to use the title attribute, but create your own tooltip instead? It's easier than you think and you don't need any external libraries.

Data attribute to the rescue โ›‘๏ธ

The core is the data attribute of HTML. This allows us not only to pass JavaScript data from HTML, but also to pass it to CSS and use it there. CSS offers a way to retrieve this attribute and use it in CSS classes. With attr() we can now grab the content and display it as content.

Preview image

With a little styling and minimal JavaScript, you can create beautiful and appealing tooltips that also match the design of your website.

The code ๐Ÿ‘จ๐Ÿผโ€๐Ÿ’ป

Let's assume we want to add a tooltip to a button. Generally, you can do this with the title attribute, but they don't look nice and are also quite inflexible in terms of styling options.

Preview image

In our example, we simply want to generate a button with a tooltip. This looks like this:

<button class="tooltip" data-tooltip="This is a tooltip!">Hover over me</button>
Enter fullscreen mode Exit fullscreen mode

And this is where the Data attribute comes into play! We use it to create a new attribute data-tooltip. We then pass this attribute value on to CSS:

/* Styles for the tooltip */
.tooltip {
    position: relative; /* Position relative to contain the tooltip */
    cursor: pointer; /* Pointer cursor for better UX */
}

/* Hide the tooltip by default */
.tooltip::after {
    content: attr(data-tooltip); /* Use the data-tooltip attribute value */
    position: absolute; /* Position the tooltip */
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 5px; /* Some padding */
    border-radius: 5px; /* Rounded corners */
    white-space: nowrap; /* Prevent line breaks */
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.3s; /* Smooth transition */
}

/* Show the tooltip on hover */
.tooltip:hover::after {
    opacity: 1; /* Show the tooltip */
    visibility: visible; /* Make the tooltip visible */
}
Enter fullscreen mode Exit fullscreen mode

As you can see, we have passed the content of the attribute to CSS and can thus use and display the content quite smoothly.

Preview image

Positioning of the tooltip ๐Ÿ“ฐ

Now, however, we may also want to be able to decide where the tooltip is displayed, whether at the top bottom or on the left and right. We can also use the data attribute for this by writing our own classes for this and positioning the tooltip accordingly with transform:

.tooltip[data-position="top"]::after {
    bottom: 100%; /* Position above the element */
    left: 50%; /* Center the tooltip */
    transform: translateX(-50%); /* Center the tooltip */
    margin-bottom: 10px; /* Space between tooltip and element */
}

.tooltip[data-position="bottom"]::after {
    top: 100%; /* Position below the element */
    left: 50%; /* Center the tooltip */
    transform: translateX(-50%); /* Center the tooltip */
    margin-top: 10px; /* Space between tooltip and element */
}

.tooltip[data-position="left"]::after {
    right: 100%; /* Position to the left of the element */
    top: 50%; /* Center the tooltip */
    transform: translateY(-50%); /* Center the tooltip */
    margin-right: 10px; /* Space between tooltip and element */
}

.tooltip[data-position="right"]::after {
    left: 100%; /* Position to the right of the element */
    top: 50%; /* Center the tooltip */
    transform: translateY(-50%); /* Center the tooltip */
    margin-left: 10px; /* Space between tooltip and element */
}
Enter fullscreen mode Exit fullscreen mode

Preview image

Dynamic positions โš—๏ธ

So that the tooltip does not run beyond the viewport limits, we use a small JavaScript that calculates the distances to the viewport and sets the appropriate data-position:

document.addEventListener('DOMContentLoaded', function() {
    const tooltips = document.querySelectorAll('.tooltip');

    tooltips.forEach(tooltip => {
        tooltip.addEventListener('mouseover', () => {
            const tooltipRect = tooltip.getBoundingClientRect();
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;
            const tooltipText = tooltip.getAttribute('data-tooltip');

            if (tooltipRect.top > 50) {
                tooltip.setAttribute('data-position', 'top');
            } else if (viewportHeight - tooltipRect.bottom > 50) {
                tooltip.setAttribute('data-position', 'bottom');
            } else if (tooltipRect.left > 50) {
                tooltip.setAttribute('data-position', 'left');
            } else if (viewportWidth - tooltipRect.right > 50) {
                tooltip.setAttribute('data-position', 'right');
            }
        });
    });
});
Enter fullscreen mode Exit fullscreen mode

That's it! You have now created your own tooltip with (almost) pure CSS and HTML, which you can style very well and use in your website.

Interactive example ๐Ÿ›


If you like my posts, it would be nice if you follow my Blog for more tech stuff.

๐Ÿ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Image of Timescale

Timescale โ€“ the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

๐Ÿ‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityโ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple โ€œthank youโ€ goes a long wayโ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay