Ich hatte mich letzte Woche und am Wochenende leider wenig erfolgreich bemüht, eine Anleitung für einen Bilder-Tooltipp zu schreiben.
Das Problem dabei ist, dass Internet Explorer und Firefox das Infofenster trotz Definition an unterschiedlichen Stellen einblenden, bzw. den z-index falsch ausgeben.
hab' mich jetzt nochmal drangesetzt und es scheint in beiden Browsern zu funktionieren. Versuch's mal damit:
CSS:
HTML
Die Positionierung kannst du über CSS an dieser Stelle vornehmen:
top: -100px;
left: 0;
Mit einem bild klappt's. bei mehreren scheint es noch Probleme zu geben, da hab' ich momentan den Dreh noch nicht raus.
Bitte ggf. um kurze Rückmeldung, ob das so klappt, weil ich es noch nicht intensiv ausgetestet habe.
Das Problem dabei ist, dass Internet Explorer und Firefox das Infofenster trotz Definition an unterschiedlichen Stellen einblenden, bzw. den z-index falsch ausgeben.
hab' mich jetzt nochmal drangesetzt und es scheint in beiden Browsern zu funktionieren. Versuch's mal damit:
CSS:
Code:
a.info
{
position:relative;
color:#2D006B;
text-decoration:none;
display: block;
}
a.info span
{
display: none;
}
a.info:hover span
{
display:block;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
position: relative;
top: -100px;
left: 0;
}
HTML
Code:
<p><a class="info" href="#"><img src="deinbild.jpg" width="" height="" border="0" alt=""><span>Hallo, ich bin ein Tooltip oder das CSS-Info-Popup-Fenster. Hier kannst du Infos reinschreiben</span></a>
</p>
Die Positionierung kannst du über CSS an dieser Stelle vornehmen:
top: -100px;
left: 0;
Mit einem bild klappt's. bei mehreren scheint es noch Probleme zu geben, da hab' ich momentan den Dreh noch nicht raus.
Bitte ggf. um kurze Rückmeldung, ob das so klappt, weil ich es noch nicht intensiv ausgetestet habe.