Einfach und schnell Tooltips erstellen
Marco
Posted on June 5, 2024
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 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.
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.
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.
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 */
}
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 🛝
If you like my posts, it would be nice if you follow my Blog for more tech stuff.
Posted on June 5, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.