Wenn man versucht für ein Webprojekt ein paar Sprechblasen bzw. Tooltips in einer Tabelle in allen Browsern richtig anzuzeigen, hat man durch diverse Abweichungen des Browsers vom Standard so seine Schwierigkeiten. Gerade, wenn man Ajax Fähigkeiten oder einfach nur dynamisch vergrößernde Tooltips einbauen möchte.
Hier möchte ich einen etwas ungewöhnlichen Ansatz für die Lösung des Problems vorstellen.
Sie wurde bisher im Internet Explorer 6,7,8; Firefox 3.6.3; Safari 4 und Opera 10.52 erfolgreich getestet.
Zur Technik:
In diesem Beispiel werden die Blasen mit dem CSS Attribut "display: none" generiert.
Wenn man nun auf eine Stelle in der Tabelle klickt bzw. mit der Maus drüberfahrt, kann mit den Eigenschaften onclick, onmouseover und onmouseout eine Javascriptfunktion aufgerufen werden.
Diese verschiebt die benötigte Blase zur aktuellen Mauszeigerposition + Offset und macht Sie sichtbar.
Durch erneutes Klicken oder onmouseout kann je nach Wunsch die Blase wieder verschwinden werden lassen.
Demo
Download Demo
Keine Kommentare:
Kommentar veröffentlichen