Beispiel:CSS-Anw-tooltip-1.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:SELFHTML-Beispiel-Grundlayout.css" />  
  <style>
img {
  background: white; 
  border-radius: 12px;
  float: right;
}
  </style>
  <title>Tooltips 1</title>
</head>

<body>
  <h1>Tooltips mit dem title-Attribut</h1>

  <main>
    
    <h2 title="Jetzt schau ich mal, wie lange ich tippen kann ohne die Luft anzuhalten - Ja, auch bei Überschriften kann man ein title-Attribut verwenden. 
           Bei einer zu großen Textlänge brechen die Browser den Text um, 
           dies ist allerdings nicht für jeden Browser steuerbar.
           Manche Browser brechen den Text bei einem Zeilenumbruch im Code um.">
    Tooltips mit dem title-Attribut
</h2>
<img src="https://wiki.selfhtml.org/images/e/ec/S-Logo-vektor.svg" title="Das ist ein Bild." alt="self-logo">
<p>Dieser Absatz enthält eine <abbr title="Abkürzung">Abk.</abbr> gefolgt von weiterem Text.</p>
<p>In der Textgestaltung beschreibt ein 
   <dfn title="dfn steht für Definition, also Erklärung">Absatz, lateinisch passus, 
    einen aus einem oder mehreren Sätzen bestehenden Abschnitt eines fortlaufenden Textes.
   </dfn>
</p>

<p>Zurück zum <a title="Hier geht’s zum Artikel …" href="https://wiki.selfhtml.org/wiki/CSS/Anwendung%20und%20Praxis/Tooltips%20mit%20CSS">Artikel</a></p>

<q>Mehr dazu im 
   <cite title="Quellenangabe">
     <a href="https://wiki.selfhtml.org">Self-Wiki</a>
   </cite>
</q>
  </main>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Anw-tooltip-1.html&oldid=43757“