Beispiel:Popover-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de">
<head> <meta charset="utf-8"> <title>Popover - 2</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
[popover] {
background: #fffbf0; border: thin solid #e7c157; max-width: 20em; position: absolute; margin: 4rem auto; padding: 1rem;
} .close-btn {
border: none;
border-radius: 0 0 0 8px; background-color: #c82f04;
color: white;
cursor: pointer;
position: absolute; right: 0.25rem;
font-size: 1.25em; font-weight: bold;
padding: 0.25em 0.4em;
text-align: center;
top: 0.5rem;
}
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;
}
body { background-color: #999; }
</style>
</head> <body>
Tooltip mit Popover - 2
<button popovertarget="additional-info"> → mehr Infos </button>
Zusatz-Info
In einem HTML-Element mit popover-Attribut können weitere Informationen präsentiert werden.<p>
<p>Ein Klick auf den Schließen-Button entfernt das Popover!
(Genau so wie ein Klick außerhalb oder ESC.)
<button popovertarget="additional-info" popovertargetaction="hide" class="close-btn"> X Schließen
</button>
</body> </html>
