Startseite
CSS Snippets
Impressum
Einfaches Tooltip, gesteuert über Data-Attribute, dargestellt mit CSS
HTML
<button data-tooltip="Auf jeden Fall!">Video liken?</button
HTML kopieren
CSS
[data-tooltip] { position: relative; cursor: pointer; background-color:yellow; color:black; padding:10px 20px; } /* Tooltip-Box */ [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: -45px; left: 50%; transform: translateX(-50%); background: white; color: black; padding: 6px 10px; border-radius: 4px; white-space: nowrap; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10; } /* Tooltip-Pfeil */ [data-tooltip]::before { content: ""; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: white; opacity: 0; transition: opacity 0.2s ease; z-index: 100; } /* Tooltip anzeigen */ [data-tooltip]:hover::after, [data-tooltip]:hover::before { opacity: 1; }
CSS kopieren
