nicht angemeldet
mehrzeilige tooltips
suche nach einer einfachen möglichkeit in tooltips (title="bla bla bla") zeilenumbrüche zu erzwingen um so mehrzeilige tooltip-fenster zu erzeugen. die lösung sollte möglichst auf reinem xhtml und css basieren und nicht auf der über scripte realisiert werden.
hat jemand eine idee?
danke
thorsten
-
hi,
suche nach einer einfachen möglichkeit in tooltips (title="bla bla bla") zeilenumbrüche zu erzwingen um so mehrzeilige tooltip-fenster zu erzeugen. die lösung sollte möglichst auf reinem xhtml und css basieren und nicht auf der über scripte realisiert werden.
http://www.drweb.de/trickkiste/tricks2.shtml
mozilla weigert sich aber IIRC, und zeigt dann nur ein eckiges kästchen für ein sonderzeichen an.
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
http://www.drweb.de/trickkiste/tricks2.shtml
mozilla weigert sich aber IIRC, und zeigt dann nur ein eckiges kästchen für ein sonderzeichen an.
guter tip -
zumindest im ie funktioniertes. mozilla zeigt bei mir gar nix ausser zusätzlichem leerraum an.ich hatte es zuvor schon mit %0A versucht - was ja bekanntlich im body einer email bei der übergabe von text zeilenumbrüche erzwingt - hatte hiermit aber leider keinen erfolg.
als standardkonform kann man das dann wohl leider nicht bezeichnen
-
Hi,
wenn Du das title-Attribut verwendest, wirst Du auch das Problem haben, daß längere Texte (das werden sie ja wohl sein, wenn Du sie mehrzeilig gestalten willst) nicht gelesen werden können - jedenfalls nicht ohne mühsam mehrfach neu über das Element zu fahren. Ich mache das lieber mit CSS so: http://www.1ngo.de/web/infobox.html.
freundliche Grüße
Ingo-
Ich mache das lieber mit CSS so: http://www.1ngo.de/web/infobox.html.
hi ingo -
sehr geile lösung - aber wie mach ich es wenn ich echte links mit einer infobox belegen will...vielleicht geht es mit einer zusätzlich span tag
span.infobox { border-bottom: 1px dashed #c30; text-decoration:none; }
span.infobox:hover { cursor:help; color:#c30; background:white; }
span.infobox span { visibility:hidden; position:absolute; left:16em;
margin-top:1.5em; padding:1em; text-decoration:none; }
span.infobox:hover span { visibility:visible; border:1px solid #c30;
color:blue; background:white; }
</style>
<!--[if IE 5]><style type="text/css">
span.infobox span { display:none; }
span.infobox:hover span { display:block; }
</style><![endif]--><!--html-->
<a href="#"><span class="Infobox">Link</span></a>
und noch ne frage - stichtwort barrierefreiheit -
wie interpretiert ein screenreader z.b. jaws diese lösung?-
Hi,
sehr geile lösung - aber wie mach ich es wenn ich echte links mit einer infobox belegen will...
danke. Wo siehst Du ein Problem, statt auf "#" auf ein echtes Ziel zu verlinken?
<a href="#"><span class="Infobox">Link</span></a>
und noch ne frage - stichtwort barrierefreiheit -
wie interpretiert ein screenreader z.b. jaws diese lösung?In diesem Fall würde "Link" als Linkziel vorgelesen, aber wo ist hier die Infobox zu dem Linktext? Wenn der Infotext wie auf meiner Seite vorhanden wäre (und mit einem Leerzeichen getrennt!), dann würde der Linktext und direkt folgend der Text der Infobox vorgelesen. Eine Klammerung des Infotextes, also [Beschreibung...] würde das ganze natürlich noch verständlicher machen.
freundliche Grüße
Ingo
-
-
Hallo, Ingo!
... Ich mache das lieber mit CSS so: http://www.1ngo.de/web/infobox.html.
mein problem mit der css-lösung ist dabei immer, dass in so einem tooltip keine weiteren links (evtl. mit weiteren tooltips) untergebracht werden können.
ich vermute, dafür gibt es keine lösung ohne javascript (die auch im IE funktioniert)?freundl. Grüsse aus Berlin, Raik
-
Hallo, Ingo!
mein problem mit der css-lösung ist dabei immer, dass in so einem tooltip keine weiteren links (evtl. mit weiteren tooltips) untergebracht werden können.
ich vermute, dafür gibt es keine lösung ohne javascript (die auch im IE funktioniert)?Da scheint es nicht mal eine Lösung für Geckos zu geben. Theoretisch sollte für ein Konstrukt
<a href="?">Link</a><span class="span">Hover-Text</span>
mit folgende CSS-Anweisungen einen Einblendeeffekt erzeugen...
a:link+span {display:none}
a:visited+span {display:none}
a:hover+span {display:block;width:100px;position:absolute;padding:10px;text-decoration:none;background:red}
a:active+span {display:block;width:100px;position:absolute;padding:10px;text-decoration:none;background:red}
a:focus+span {display:block;width:100px;position:absolute;padding:10px;text-decoration:none;background:red}Aber leider erkennt ein Mozilla nicht mal folgendes:
<span>ich </span><span>Du</span>
Für:
span+span {color:red}
Sollte es dennoch eine Lösung geben, melde ich auch mein Interesse an :)
Gruß aus Berlin!
eddi-
Hi,
Aber leider erkennt ein Mozilla nicht mal folgendes:
<span>ich </span><span>Du</span>
Für:
span+span {color:red}Ich weiß nicht, was Du mit "leider erkennt ein Mozilla nicht mal folgendes" meinst.
Wenn ich das in eine Seite einbaue, ist das "Du" rot.
Und wenn im zusätzlich CSS das steht:
span+span { display:none; }
span:hover+span { display:inline; }erscheint das "Du" nur beim hovern des "ich"
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
Aber leider erkennt ein Mozilla nicht mal folgendes:
<span>ich </span><span>Du</span>
Für:
span+span {color:red}Ich weiß nicht, was Du mit "leider erkennt ein Mozilla nicht mal folgendes" meinst.
Dann betrifft es nur meine lokale Insterllation (es werden beide Texte rot ausgegeben). Aber <div>ich </div><span>Du</span> wirb beispielsweise korrekt angezeigt.
Suse => Mozilla 1.6
Gruß aus Berlin!
eddi-
Hi,
Aber leider erkennt ein Mozilla nicht mal folgendes:
<span>ich </span><span>Du</span>
Für:
span+span {color:red}
Ich weiß nicht, was Du mit "leider erkennt ein Mozilla nicht mal folgendes" meinst.
Dann betrifft es nur meine lokale Insterllation (es werden beide Texte rot ausgegeben). Aber <div>ich </div><span>Du</span> wirb beispielsweise korrekt angezeigt.Hast Du vor dem "ich" span ein weiteres span?
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
AUA!
Danke!Gruß aus Berlin!
eddi
-
-
-
-
-
Hi,
mein problem mit der css-lösung ist dabei immer, dass in so einem tooltip keine weiteren links (evtl. mit weiteren tooltips) untergebracht werden können.
ich vermute, dafür gibt es keine lösung ohne javascript (die auch im IE funktioniert)?korrekt vermutet. Da es unzulässig ist, in einem Link weitere Links zu setzen, geht das in keinem Browser ohne Javascript. In modernen Browsern (also nicht dem IE) könntest Du es über CSS zumindest hinbekommen, einem beliebigen anderen Element als A die Pseudoklasse :hover zuzuweisen und so in die Infobox Links setzen.
freundliche Grüße
Ingo
-
-
-
-