Beispiel:Inline-Tooltips mit Popover und Anchor-Technik.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html>

<html lang="de"> 

 <head>
   <meta charset="utf-8">
   <title>Inline-Tooltips mit Popover und Anchor-Technik</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;
 @supports (position-anchor: auto) {
   margin: 0;
   inset: auto;

/* Positionierung des Tooltips */ 

   position-anchor: auto;
   bottom: calc(anchor(top) + var(--triangle-width));
   left: max(8px,calc(anchor(left) - var(--triangle-width)));
 }

/* erzeugt ein Dreieck */ 

 --triangle-width: 2em;
 &::before {
   content:"";
   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;		
 }
 &::backdrop {
   backdrop-filter: blur(1px);
 }

}

h1 { margin-bottom: 5rem; }

body { 

   --accentColor: #dfac20;
   background-color: #ddd;

} 

   </style>
 </head>
 <body>

Inline-Tooltips mit Popover und Anchor-Technik

Popovers sind überall im Web zu finden. Man sieht sie in Menüs, <button popovertarget="t1">Tooltipps</button>Infobox, die zusätzliche Informationen enthält. und Dialogen, die sich als Kontoeinstellungen, Offenlegungs-Widgets und Warenkorbvorschauen manifestieren können.

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>Element, das in der obersten Ebene aufplobbt. 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>W3C Community Group, die sich die Verbesserung des Web auf die Fahnen geschrieben hat. hat es sich zur Aufgabe gemacht, für solche UI-Elemente optimierte Modelle zu entwerfen und diese zur Standardisierung einzureichen.

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>Neuer Standard der WHATWG schnell und einfach Tooltipps und Popups erstellen, die diese Funktionalitäten bereits browserseitig mitbringen. Es ist kein kompliziertes CSS oder gar JavaScript nötig!

Funktioniert Stand 10/2025 nicht im Firefox.

</body> </html>

Abgerufen am 16.10.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Inline-Tooltips_mit_Popover_und_Anchor-Technik.html"