Tooltip positionieren / länger einblenden
0 
Felix Riesterer
0 0 Take
0
0
Tooltip positionieren / länger einblenden
Hallo!
Auf der Homepage von meinem Verein möchte ich gerne eine News-Sparte einbauen, in der ich dann Kurzmeldungen notiere, allerdings dann mittels eines Tooltips die ganze Meldung (Spielbreicht, etc.) einblenden kann.
Hatte das zuerst einmal mit HTML und CSS-Formatierung versucht, hatte dann aber das Problem, dass ich in diesen Tooltip keine weiterführenden Links einbauen konnte.
Daraufhin habe ich im Internet eine Möglichkeit gefunden, das selbe auch mit JavaScript zu erreichen und soweit ich es bisher beurteilen kann, klappt das auch.
Jetzt habe ich nur 2 Probleme:
1. Wie erreiche ich es, dass der Tooltip nach dem "mouseout" noch etwas länger eingeblendet wird? Schließlich nützt es mir ja wenig, wenn ich einen Link in dem Tooltip habe, diesen aber nie anklicken kann, weil der Tooltip sofort verschwindet!
2. Bisher hängt der Tooltip am Mauszeiger. Mir wäre es aber lieber, wenn er am Trigger-Wort (klassischer Weise das Wörtchen "mehr") positioniert wäre, halt so, dass der rechte Rand des Tooltips gleichauf ist, mit dem rechten Ende des Trigger-Wortes.
Hier mal die entsprechende Stelle im Quelltext:
<style>
<!--
.tooltip1 {
position: absolute;
display: none;
background-color: #FDFFB2;
z-index: 100;
top: 30px;
right: 0px;
width: 200px;
max-width: 500px;
color: #000000;
border: 1px solid;
border-color: #000000;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
padding: 2px 10px 2px 10px;
font-size: smaller;
font-family: Arial, Helvetica, Sans-serif;
}
-->
</style>
<script type="text/javascript">
<!--
wmtt = null;
document.onmousemove = updateWMTT;
function showWMTT(id) {
wmtt = document.getElementById(id);
wmtt.style.display = "block";
}
function hideWMTT() {
wmtt.style.display = "none";
}
-->
</script>
<div id="1" class="tooltip1">Dies ist unser erster Tooltip<img src="URL"><br /><a href="URL">Link</a></div>
[...]
<a onmouseover="showWMTT('1')" onmouseout="hideWMTT()" href="#">Unser Link</a>
Vielen Dank schonmal für die Hilfe,
Kingpin
-
Lieber Kingpin,
mit HTML und CSS-Formatierung versucht, hatte dann aber das Problem, dass ich in diesen Tooltip keine weiterführenden Links einbauen konnte.
warum nicht? Eine Lösung mit diesen Technologien halte ich für die sinnvollste! Beispiel: Ingos Infobox (leider momentan offline, Google erinnert sich aber)
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Das Beispiel von Ingos Infobox ist praktisch genau das, was ich bereits mit HTMl und CSS versucht habe.
Nur geht eben in keinem mir bekannten Brwoser, dass ich innerhalb eines Links (dem vom Tooltip) noch einen weiteren platziere, was ja auch logisch ist...ein Link im Link kann ja net gehen ;)Wenn es da eine alternative Lösung gibt, würde ich die natürlich gerne dem JavaScript vorziehen.
Gruß Kingpin
-
Das Beispiel von Ingos Infobox ist praktisch genau das, was ich bereits mit HTMl und CSS versucht habe.
ein Link im Link kann ja net gehen ;)Du musst die :hover Pseudoklasse ja nicht unbedingt auf ein <a>-Element anwenden! ;) Das hat Ingo nur wegen der Kompatibilität mit älteren Browsern gemacht (*hust IE *hust). Aktuelle Browser können diese (richtigerweise) auch auf z.B. <span> anwenden.
Gruß,
Take
-
Om nah hoo pez nyeetz, Kingpin!
Nur geht eben in keinem mir bekannten Brwoser, dass ich innerhalb eines Links (dem vom Tooltip) noch einen weiteren platziere, was ja auch logisch ist...ein Link im Link kann ja net gehen ;)
na warum denn nicht?
Das Tooltip auslösende Element könnte die Klasse tooltip haben. Danach käme beispielsweise ein Div. In diesem können beliebig viele Links vorkommen.
.tooltip div {left: -999px;} /* aus dem Anzeigebereich verschoben .tooltip:hover div {left: ...;} /* so dass es sichtbar ist */Das allein reicht natürlich noch nicht zum schön aussehen.
Matthias
--
-
-
-
Om nah hoo pez nyeetz, Kingpin!
Die Durcharbeitung dieses Threads sollte für dich von Wert sein.
Matthias
--