Beispiel:Popover-4.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Popover - 4</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: medium solid var(--accentColor);
max-width: 20em;
padding: 1rem;
overflow: unset;
}
/* erzeugt ein Dreieck */
[popover]::before {
content:"";
--triangle-width: 2em;
display: block;
position:absolute;
left: var(--triangle-width);
bottom: calc(-1 * var(--triangle-width));
border-width: var(--triangle-width) calc(0.5 * var(--triangle-width)) 0;
border-style: solid;
border-color: var(--accentColor) transparent;
transition: all 0.5s;
}
h1 {
margin-bottom: 5rem;
}
body {
--accentColor: #dfac20;
background-color: #999;
}
</style>
</head>
<body>
<h1>Inline-Tooltips mit Popover</h1>
<p>Popovers sind überall im Web zu finden. Man sieht sie in Menüs, <button popovertarget="t1">Tooltipps</button><span id="t1" popover>Infobox, die zusätzliche Informationen enthält.</span> und Dialogen, die sich als Kontoeinstellungen, Offenlegungs-Widgets und Warenkorbvorschauen manifestieren können.</p>
<p>
Obwohl diese Komponenten weit verbreitet sind, war ihre Erstellung in Browsern bisher überraschend kompliziert. Sie müssen neben der Kernfunktionalität Ihres <button popovertarget="t2">Popovers</button><span id="t2" popover>Element, das in der obersten Ebene aufplobbt.</span> Skripte hinzufügen, um Fokus sowie Öffnungs- und Schließzustand mit Maus, Tastatur und Touchgeräten zu verwalten. Die <button popovertarget="t3">open-ui.org</button><span id="t3" popover>W3C Community Group, die sich die Verbesserung des Web auf die Fahnen geschrieben hat.</span> hat es sich zur Aufgabe gemacht, für solche UI-Elemente optimierte Modelle zu entwerfen und diese zur Standardisierung einzureichen.</p>
<p>Das <a href="https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover">Tutorial</a> zeigt, wie Sie mit der neuen <button popovertarget="t4">Popover API</button><span id="t4" popover>Neuer Standard der WHATWG</span> schnell und einfach Tooltipps und Popups erstellen, die diese Funktionalitäten bereits browserseitig mitbringen. Es ist kein kompliziertes CSS oder gar JavaScript nötig! </p>
</body>
</html>
