Tooltip Frage

ice-t · 15. September 2015

Hallo alle zusammen..

Ich habe folgendes Problem:

Ich habe erfolgreich ein "Tooltip" erstellt, wobei jedoch der auftauchende "Tooltip" ausserhalb meines Bildes angezeigt wird.
Meine Frage ist jetzt wie ich es hinbekomme das mein Text oder Foto innerhalb meines Hauptbildes angezeigt wird.

Code

.tooltip { position:relative; z-index:20; }.tooltip span { display:none;}.tooltip:hover {z-index:21;}.tooltip:hover span {	 display:block;}

Code

<a href="" class="tooltip"> <area shape="rect" coords="x,y,z,xy"> <span><img src="123.jpg" /></span></></a>

Sempervivum · 17. September 2015

Versuch mal, das span absolut zu positionieren:

CSS

.tooltip { position:relative; z-index:20; }.tooltip span { display:none; position:absolute; left:0px; top:10px;}.tooltip:hover {z-index:21;}.tooltip:hover span {	 display:block;}

Und wenn das nicht funktioniert, poste mal die URL deiner ganzen Seite. Ich überblicke nicht, was das area-Tag und das Bild, das damit zusammen hängt, für eine Auswirkung hat.

ice-t · 18. September 2015

^^Hat leider nicht geklappt.Im Anhang kann man es einfacher nachvollziehen. Wenn ich mit der Maus über das rote Rechteck gehe sollte das Tooltip innerhalb und nicht außerhalb angezeigt werden.

Basi · 18. September 2015

Vollständigen Code bitte.

ice-t · 18. September 2015

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
	background-color: #000;
}
body,td,th {
	color: #FFF;
}




.tooltip { position:relative; z-index:20; }
.tooltip span { display:none; position:absolute; left:0px; top:10px;}
.tooltip:hover {z-index:21;}
.tooltip:hover span {
	 display:block;
}




</style>
</head>




<body>
<h1>Webseite</h1>
<p>&nbsp;</p>
<center>
<p><img src="Untitled-4.jpg" width="1000" height="1000" usemap="#Map" border="0" />
  <map name="Map" id="Map">
    <a href="" class="tooltip"> <area shape="rect" coords="1,-1,79,80"> <span><img src="tooltip.jpg" width="300" height="150" /></span></></a>
    <area shape="rect" coords="1,-1,79,80" href="https://de.wikipedia.org/" />
  </map>
  </class>
</p>
</center>
</body>
</html>

Alles anzeigen

wolf · 18. September 2015

Lass dein HTML mal hier validieren: https://validator.w3.org/
Da sind viele schwere Fehler drin.

Tooltip Frage

Jetzt mitmachen!

Teilen