nicht angemeldet
Tooltip mit Zeilenumruch in Auswahlliste
Hallo,
die dritt- und zweitletzte Zeile des Codes unten zeigen meine zwei misslungenen Versuche, für Auswahloptionen einer select-Box Tooltips mit Zeilenumbruch zu erzeugen[1]. Kann man das auch richtig machen - und wenn ja, wie?
MfG, Helmut
[1] Die Möglichkeit, "title" zu verwenden und dabei auf Umbrüche zu verzichten, ist mir bekannt. Ich will auch keine Romane in den Tooltips unterbringen, sonder kurze Hinweise übersichtlicher machen.
-------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easy CSS Tooltip - by Kollermedia.at</title>
<!-- http://www.bencosweb.com/franz/tooltip/css_tooltip_kollermedia1.html -->
<style type="text/css">
<!-- /* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at] */
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px; }
a:hover {background:#ffffff; text-decoration:none;}
/*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline;position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
p:hover {background:#ffffff; text-decoration:none;}
/*BG color is a must for IE6*/
p.tooltip span {display:none; padding:20px 30px; margin-left:8px; width:500px;}
p.tooltip:hover span{display:inline;position:absolute; border:5px solid #ff0000; background:#00ff00; color:#0000ff;}
span:hover {background:#ffffff; text-decoration:none;}
/*BG color is a must for IE6*/
span.tooltip span {display:none; padding:20px 30px; margin-left:8px; width:500px;}
span.tooltip:hover span{display:inline;position:absolute; border:5px solid #ff0000; background:#00ff00; color:#0000ff;}
option:hover {background:#ffffff; text-decoration:none;}
/*BG color is a must for IE6*/
option.tooltip span {display:none; padding:20px 30px; margin-left:8px; width:500px;}
option.tooltip:hover span{display:inline;position:absolute; border:5px solid #ff0000; background:#00ff00; color:#0000ff;}
-->
</style>
</head> <body>
<!-- 1. gelungener Versuch -->
Easy <a href="#" class="tooltip">Tooltip
<span>So gelingt<br>der Umbruch.</span>
</a>.
<!-- 2. gelungener Versuch -->
<p class="tooltip">Hier gibt es weitere Information.<span>So gelingt<br>der Umbruch auch.</span> </p>
<!-- 3. misslungener Versuch -->
<form action="select.htm">
<select name="Titel" size="3" onclick="hier_nicht_wichtig()">
<!-- Option-Syntax: <option value="...">Anzeige</option> -->
<option class="tooltip" value="abc">Die erste Wahl<span> So gelingt <br>der Umbruch nicht. </span></option>
<option value="abc">Die zweite Wahl<span class="tooltip" > So gelingt <br>der Umbruch auch nicht. </span></option>
</form></body></html>
--------------------------------------------------------------------------
-
die dritt- und zweitletzte Zeile des Codes unten zeigen meine zwei misslungenen Versuche, für Auswahloptionen einer select-Box Tooltips mit Zeilenumbruch zu erzeugen[1]. Kann man das auch richtig machen - und wenn ja, wie?
Was ist in <option> erlaubt?
Sollte deine Frage beantworten.
Wenn du mehrzeilige Auswahl brauchst dann solltest du Radiogroups verwenden.Ich meine, dass bei einer Selectbox ein Tooltip für die ganze Selectbox informatif sein soll. Wenn jede Option ihren eigenen Tipp brauchst, dann ist deine Auswahlmethode falsch.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Wenn jede Option ihren eigenen Tipp brauchst, dann ist deine Auswahlmethode falsch.
mfg Beat
Hallo Beat,
ich glaube nicht, dass meine _Auswahlmethode_ falsch ist. Die select-Box erlaubt mit "title" durchaus, dass jede option ihren eigenen Tipp bekommt. Es geht mir um die Moglichkeit, diese Tipps durch Zeilenumbrüche klarer zu gestalten. _Die_ mache ich falsch und suche dafür Rat.MfG, Helmut
-
ich glaube nicht, dass meine _Auswahlmethode_ falsch ist. Die select-Box erlaubt mit "title" durchaus, dass jede option ihren eigenen Tipp bekommt. Es geht mir um die Moglichkeit, diese Tipps durch Zeilenumbrüche klarer zu gestalten. _Die_ mache ich falsch und suche dafür Rat.
Ich halte die Browser Tooltips für ungeeignet in Selectboxen. Sie erscheinen immer verzögert und oft dann falsch assoziiert.
Denke bei Browsertooltips an kurze Einzeiler. Mehr ist nicht garantiert.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Denke bei Browsertooltips an kurze Einzeiler. Mehr ist nicht garantiert.
mfg Beat
Ja, das ist wohl das Beste, was man damit machen kann.
Für meine Zwecke ist mir jetzt ein ziemlich übler Workaround eingefallen. Ich bleibe bei "title" und erreiche definierte Zeilenumbrüche an der gewünschten Stelle durch Einfügen von ______________________________________________________ . Das ist nicht gerade elegant, aber viel besser als der automatische Umbruch. Im FF und IE funktioniert es.
MfG, Helmut
-
-
-