Beispiel:CSS-Anw-tooltip-3.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>
main {
  width: 80%;
  margin: 0 auto;
}  
.tooltip {
  color: #c32e04; 
  text-decoration: underline; 
  cursor: help; 
  position: relative; 
 
}
 
.tooltip span[role=tooltip] {
  display:none;
 
}
 
.tooltip:hover span[role=tooltip] {
  	display: block;  
  	position: absolute; 
  	bottom: 1em;
  	left: -6em;
	width: 15em;
  	padding: 0.5em;
  	z-index: 100;
  	color: #000; 
  	background-color: #ffebe6;
  	border: solid 1px #c32e04;
	border-radius: 0.2em;  
 
}
  </style>
  <title>Tooltips 3</title>
</head>
 
<body>
  <h1>Tooltips mit CSS selbst gestalten</h1>
 
  <main>
 
    <p>Das 
       <dfn class="tooltip"> WWW
         <span role="tooltip">Unter dem 'WWW' (World Wide Web) versteht man das Internet.</span>
       </dfn>
       ist aus dem heutigen Leben nicht mehr wegzudenken!
    </p>
  </main>
 
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Anw-tooltip-3.html&oldid=66667“