Posted onJun 5, 2024 • Originally published atblog.disane.dev

Einfach und schnell Tooltips erstellen

Einfache Tooltips mit HTML/CSS mit minimalem JavaScript erstellen? ich zeig dir wie es geht 🪄

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 dasData-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. mitattr()können wir uns denn Inhalt nun schnappen und alscontent anzeigen.

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 demtitle-Attribut machen, aber die sehen nicht schön aus und sind auch recht unflexibel was die Styling-Möglichkeiten angehen.

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

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

Und hier kommt dasData-Attributzum Tragen! Wir erzeugen damit ein neues Attributdata-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:opacity0.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.

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

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 passendedata-positionsetzt:

document.addEventListener('DOMContentLoaded',function(){consttooltips=document.querySelectorAll('.tooltip');tooltips.forEach(tooltip=>{tooltip.addEventListener('mouseover',()=>{consttooltipRect=tooltip.getBoundingClientRect();constviewportWidth=window.innerWidth;constviewportHeight=window.innerHeight;consttooltipText=tooltip.getAttribute('data-tooltip');if(tooltipRect.top>50){tooltip.setAttribute('data-position','top');}elseif(viewportHeight-tooltipRect.bottom>50){tooltip.setAttribute('data-position','bottom');}elseif(tooltipRect.left>50){tooltip.setAttribute('data-position','left');}elseif(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.