Beispiel:Position-absolute-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" > <title>position: absolute - 2</title> <style> .tooltip {
position: relative;
}
.tooltip [role="tooltip"] {
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
background: white; border: thin solid; border-radius: 0.5em;
width: 15em;
padding: 0.5em;
visibility: hidden; opacity: 0;
}
.tooltip:hover [role="tooltip"], .tooltip:focus-within [role="tooltip"] {
visibility: visible; opacity: 1;
}
body > * { margin-inline:5em; } </style> </head> <body>
position: absolute - 2
Tooltips mit CSS selbst gestalten
Das WWW Unter dem 'WWW' (World Wide Web) versteht man das Internet. ist aus dem heutigen Leben nicht mehr wegzudenken!
</body> </html>
