Beispiel:HTML details-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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> details { 

   grid-column: 2 / 3;
   height: min-content;
   transition: all .5s;

}

[role=button] { background: var(--accent); color: var(--background); border-radius: 0 0.5em 0.5em; border: thin solid var(--accent); width: min-content; padding: 0 1.5em 0.5em; font-size: 1.5em; line-height: 100%; font-weight: bold; }

summary::marker { 

  color: transparent;

}

details[open] [role=button] { background: var(--background); color: var(--accent); 

   }

details p { position: relative; padding: 1em; border: thin solid var(--accent); border-radius: 0 0.5em 0.5em; }

details p::before { content: ' '; position: absolute; width: 0; height: 0; top: -1em; left: 20%; margin-left: -1em; border-style: solid; border-width: 0 1em 1em 1em; border-color: transparent transparent var(--accent) transparent; }


root {
 --accent: #337599;
 --background: white;
 --dropdown-width: 160px;  
}

body { 

 max-width: 50em;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1em;

}

h1 { 

 grid-column: 1 / -1;

} 


 </style>
 <title>details - 4</title>

</head>

<body>

Tooltip mit details

<details> 

  <summary role="button">
       Tooltip
  </summary>

Ein Tooltip ist ein kleines Popup-Fenster in Anwendungsprogrammen oder Webseiten. Es zeigt eine Beschreibung zu einem Element der grafischen Benutzungsoberfläche.

</details>

</body> </html>

Abgerufen am 23.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:HTML_details-4.html"