Beispiel:Tooltip mit data-Attribut.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" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Tooltip durch Auslesen des Data-Attributes</title>
<style>
main {
background: transparent;
border-color: transparent;
}
.tooltip {
position: relative;
color: #3983ab;
text-decoration: underline;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 20%;
background: #3983ab;
padding: 0.2em 0.4em;
color: #dfac20;
border-radius: 0.3em;
opacity: 0;
transition: all 0.3s;
min-width: 10em;
max-width: 15em;
}
.tooltip::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 1em solid #3983ab;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
transition: all 0.3s;
opacity: 0;
left: 30%;
bottom: 90%;
}
.tooltip:hover::after, .tooltip:focus::after {
opacity: 1;
bottom: 100%;
}
.tooltip:hover::before, .tooltip:focus::after {
opacity: 1;
bottom: 70%;
}
</style>
</head>
<body>
<h1>Tooltip durch Auslesen des data-Attributes</h1>
<main>
<p>Viele Leute verwenden für einfache Sachverhalte einen komplizierten <span class="tooltip" tabindex="0" data-tooltip="Ausdruck, der durch ein Fachgebiet bestimmt wird">Fachbegriff</span>, den man erst einmal nachschlagen muss.</p>
<p>Mit einem <span class="tooltip" tabindex="0" data-tooltip="kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten">Tooltip</span> haben Sie die Erklärung gleich zur Verfügung.</p>
</main>
</body>
</html>
