Einfach und schnell Tooltips erstellen

Du willst mal eben einen Tooltip in HTML/CSS erstellen und willst dabei nicht das Title-Attribut nutzten, sondern einen eigenen Tooltip erstellen? Das geht einfacher als du denkst und dafür brauchst du keine externe Bibliotheken.

Data-Attribut to the rescue ⛑️

Kernstück ist das Data-Attribut von HTML. Damit können wir nicht nur JavaScript Daten aus HTML übergeben, sondern auch an CSS übergeben und es dort nutzen. CSS bietet nämlich eine Möglichkeit an, dieses Attribut abzufischen und in CSS-Klassen zu verwenden. mit attr()können wir uns denn Inhalt nun schnappen und als content anzeigen.

attr() - CSS: Cascading Style Sheets | MDN

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element’s originating element is returned.

MDN Web Docs

Mit ein bisschen Styling und minimalem JavaScript kannst du so schöne und ansprechende Tooltips erzeugen, die auch zum Design deiner Website passen.

Der Code 👨🏼‍💻

Nehmen wir an, wir möchten einen Button mit einem Tooltip ausstatten. Generell kann man das mit dem title-Attribut machen, aber die sehen nicht schön aus und sind auch recht unflexibel was die Styling-Möglichkeiten angehen.

title - HTML: HyperText Markup Language | MDN

The title global attribute contains text representing advisory information related to the element it belongs to.

MDN Web Docs

In unserem Beispiel möchten wir einfach einen Button mit einem Tooltip generieren. Dieser sieht wie folgt aus:

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

Und hier kommt das Data-Attributzum Tragen! Wir erzeugen damit ein neues Attribut data-tooltip. Diesen Wert des Attributes geben wir dann an CSS weiter:

/* 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 */
}

Wie du siehst, haben wir damit den Inhalt des Attributes an CSS übergeben und können damit recht geschmeidig den Inhalt nutzen und anzeigen.

content - CSS: Cascading Style Sheets | MDN

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated “alt” text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.

MDN Web Docs

Positionierung des Tooltips 📰

Nun möchten wir aber auch möglicherweise entscheiden können, wo der Tooltip angezeigt wird, ob oben unten oder links und rechts. Auch dafür können wir das Data-Attribut nutzen, in dem wir eigene Klassen dafür schreiben und den Tooltip entsprechend mit transform positionieren:

.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 */
}

transform - CSS: Cascading Style Sheets | MDN

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

MDN Web Docs

Dynamische Positionen ⚗️

Damit der Tooltip nun nicht über die Viewport-Grenzen hinaus läuft, nutzen wir ein kleines JavaScript, was die Abstände zum Viewport ausrechnet und das passende data-positionsetzt:

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');
            }
        });
    });
});

Das war's auch schon! Damit hast du nun deinen eigenen Tooltip mit (fast) purem CSS und HTML erstellt, den du sehr gut stylen und in deiner Website nutzen kannst.

Interaktives Beispiel 🛝