Quelltext von Seite Benutzer:Mediator/hovered by CSS ansehen

{{#css:
.tooltip {
position: relative;
border-bottom: 1px dotted #C20; cursor: help;
}
.tooltip:hover {z-index: 1;}
.tooltip em {display: none;}
.tooltip:hover em {
display: block;
position: absolute;
left: 0; top: 0;
margin: 20px 0 0;
width: 200px; color: #D3A7A7;
font-style: normal;
border: 2px solid #00ACE6;
padding: 4px;
background: #4B4B4E;
}
}}
----
<p>Ein bisschen Text und ein wenig<span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span> und dann noch ein bisschen mehr Text, damit es sich auch lohnt. Und wie versprochen, ....ja geradezu <span class="tooltip">unglaublich<em>Na soviel Text ist...</em></span> viel Text. Und noch ein bisschen mehr,....</p>
----
Absatz
* {{lorem}} 
* <span class="tooltip"> Information <em>Leider keine Info vorhanden !</em></span>
* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <span class="tooltip"> dolore <em>Leider keine Info vorhanden !</em></span>magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
----
Nachweis
* http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html