Beispiel:CSS-Anw-tooltip-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
.tooltip {
color: #c32e04; text-decoration: underline; cursor: help; position: relative;
}
.tooltip span[role=tooltip] {
display:none;
}
.tooltip:hover span[role=tooltip] {
display: block; position: absolute; bottom: 1em; left: -6em;
width: 15em;
padding: 0.5em; z-index: 100; color: #000; background-color: #ffebe6; border: solid 1px #c32e04;
border-radius: 0.2em;
}
p {
width: 80%; margin: 0 auto;
}
</style> <title>Tooltips 3</title>
</head>
<body>
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>
