Quelltext der Seite Mediawiki/Beispiele/Einsatz von Popup-Fenstern

{{#css:
.tooltip {
position: relative;
border-bottom: 0px 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: 1px 0 0;
width: 272px; color: Navy;
font-style: normal;
border: 0px solid Gainsboro;
padding: 1px;
background: Snow;
}
}}
----
<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>Infos noch nicht vorhanden !</em></span>
----
<div style="width: 70%; padding-left: 05%;" class="framed">
<span class="tooltip">[[Datei:Image_link.png|link=]]<em>[[Datei:ScreenShot_Club_SC_Reilingen.png|link=Club:SC_1965_Reilingen]]</em></span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et <span class="tooltip"><span style="color: DarkBlue;">dolore</span><em>Leider keine Info vorhanden!</em></span> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea <span class="tooltip"><span style="color: Gray;">commodo</span>.<em> Leider keine Info vorhanden !</em></span> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</div>
----
--<span>[[Datei:Silk_user_linux_online.png|link=Benutzer_Diskussion:Mediator|Mediator]]</span> 10:55, 9. Mai 2013 (CEST)
[[Kategorie: Mediawiki/Beispiele/CSS]]