Beispiel:CSS-Anw-tooltip-6.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: 90%;
  margin: 0 auto;
}   
.tooltip {
  color: #c32e04; 
  text-decoration: underline; 
  cursor: help; 
}
 
[data-tooltip] {
    position: relative;
}
 
[data-tooltip]::after {
    content: attr(data-tooltip);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
 
  	display: block;  
  	position: absolute; 
  	bottom: 3em;
  	left: -6em;
	width: 15em;
  	padding: 0.5em;
  	z-index: 100;
  	color: #000; 
  	background-color: #ffebe6;
  	border: solid 1px #c32e04;
	border-radius: 0.5em;  
}
 
/* erzeugt ein Dreieck */
[data-tooltip]::before {
	content:"";
	position:absolute;
	display:block;	
	opacity: 0;
	transition: opacity 0.5s;
	bottom: 1.2em; 
	left:auto;
	right:0; 
    border-width: 2em 1em 0;
	border-style:solid;
    border-color: #c32e04 transparent;
}
 
[data-tooltip]:hover::after, [data-tooltip]:hover::before{
    opacity: 1;
}
  </style>
  <title>Tooltips 6</title>
</head>
 
<body>
  <h1>Tooltips mit einer Sprechblase</h1>
 
  <main>
 
    <p>Das 
       <dfn class="tooltip" data-tooltip="Unter dem 'WWW' (World Wide Web) versteht man das Internet.">WWW</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-6.html&oldid=43762“