nicht angemeldet
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>
--------------------------------------------------------------------------