Hallo zusammen,
ich möchte einen Informationsbutton in einem Programm platzieren, der ein Textfeld mit Erläuterungen anzeigt, sobald der Anwender mit der Maus über den Button fährt.
Ist sowas mit hover möglich?
Gruß
Moin,
Ist sowas mit hover möglich?
Ja, ist es.
Aber um Deinen Titel zu kommentieren: „onmouseover“ ist JavaScript und damit etwas völlig anderes.
Grüße,
-Efchen
P.S.: Stichwort „display:block“ bzw. „display:none“.
Umsetzung
Hallo und danke für die Antwort,
in der Stylesheetvorlage wird bereits hover verwendet.
...
...
#navcontainer li a
{
padding: 1px 7px;
color: #666;
background-color: #fff;
border: 1px solid #ccc;
text-decoration: none;
}
#navcontainer li a:hover
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
#navcontainer li a#current
{
color: #000;
border: 1px solid #666;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
}
Es genügt vollkommen den Infobutton als einfaches I darzustellen. Nur wie muss ich das nun im Stylesheet und im Element selbst dann umsetzen?
Gruß und Dank!
title für hints?
P.S.: Stichwort „display:block“ bzw. „display:none“.
Hmm. Zumindest der Quellcode aus WortDruck ist bei Bildern mit title-Tags durchsetzt. Immerhin immer nach dem Alt-Tag.
Hmm. Oder ist das wieder so ein Sonderstrick:
http://www.dertagundich.de/bildbeschriftung-mit-jquery/
Also doch immer schön die Alt-Tags nutzen:
http://www.woodshed.de/publikationen/dialog-robot.html
Gruß
Stefan
Moin,
Hmm. Zumindest der Quellcode aus WortDruck ist bei Bildern mit
title-Tags durchsetzt. Immerhin immer nach dem Alt-Tag.
Du meinst Attribute, nicht Tags.
Für einen einfachen Tooltipp geht auch das title-Attribut (in jedem Tag), das ist richtig. Aber es gibt auch komplexere Lösungen, die dann wirklich HTML und CSS darin erlauben.
Hmm. Oder ist das wieder so ein Sonderstrick:
Mit jQuery ist das doch eine JavaScript-Lösung. Das muss doch nicht sein. Wenn JS abgeschaltet ist, geht wieder gar nichts. Außerdem verspricht die verlinkte Seite, was sie nicht halten kann. Die em-Tags darin sind als Quellcode sichtbar und werden nicht interpretiert - zumindest bei mir (ich hab mir das auch nicht genauer angesehen).
Also doch immer schön die Alt-Tags nutzen:
Atl-Attribut. Aber ja, das ist der Alternativtext, wenn das Image nicht angezeigt werden kann. Das hat aber erstmal nichts mit der Frage zu tun. Beim alt-Attribut wird in Browsern, die das richtig umsetzen, nichts angezeigt, das machen nur Browser mit einem Bug 
Grüße,
-Efchen
1 Like
Moin,
Es genügt vollkommen den Infobutton als einfaches I
darzustellen. Nur wie muss ich das nun im Stylesheet und im
Element selbst dann umsetzen?
Du hast ein Element, das den Tooltip bekommen soll. In dem Element (wenn möglich, ansonsten musst Du das Element gruppieren) gibts dann das eigentliche Tooltip-Fenster.
Nehmen wir an:
Text für hover.Zusätzliche Erklärung
p.tooltip span {
display:none;
}
p.tooltip:hover span {
display:block;
…
}
Bloß in Punkto Barrierefreiheit habe ich mir da keine Gedanken gemacht, was liest ein Browser vor, doch das span sicher auch? Und das könnte ja zu Verwirrungen führen. So gesehen finde ich das title-Attribut eigentlich besser. Aber na ja.
Das könnte so funktionieren. It ungetestet, aber vom Prinzip her…
Hallo und danke für den Tipp mit dem Title-Attribut!
Ist es möglich im Title-Attribut Zeilenumbrüche oder Formatierungen vorzunehmen?
So sieht der Infobereich bis jetzt aus.
Info
Gruß
Moin,
Ist es möglich im Title-Attribut Zeilenumbrüche oder
Formatierungen vorzunehmen?
Nein. Deswegen gibt es ja die zahlreichen Umsetzunges eines Tooltips per CSS.
Grüße,
-Efchen
Danke!
Trotzdem Danke!
Zeilenumbrüche im HTML-Code werden übernommen
Hallo nochmal,
also Zeilenumbrüche, die ich im HTML-Code hinterlegt habe werden dann auch auf der Seite so angezeigt.
Das genügt mir vollkommen.
Danke!