nicht angemeldet
eigene "Tooltipps" mit "abbr[title]:hover:after"
Hallo,
Ich experimentiere Grad ein bisschen und versuche mittels CSS meine eigenen Tooltipps zu gestalten. Dies erreiche ich mittels einer Kombination von Attribut-Selektoren für das "title"-Attribut, und den Pseudoklassen ":hover" und ":after".
Hier Mein CSS-Code:
abbr{
border-bottom:none
}
abbr:after{
content:"*";
font-size:0.8em;
font-family:Courier new,monospace;
font-style:normal;
color:#090;
vertical-align:super;
}
abbr[title]:hover:after {
content:"'"attr(title)"'";
border:1px solid #900;
color:#900;
padding:1px;
margin-left:3px;
background:#FFC;
}
Mein Problem ist nun, dass die 'Tooltipps' beim :hover zwangsläufig auseinanderdrücken und sich so das ganze Schriftbild verzieht. Hier könnt ihr es (mit geeignetem Browser, z.B. Mozilla) selbst beobachen:
http://www.your-boredom.de/trash/css_tooltipps.html
Meine Frage: gibt es eine Möglichkeit den content zu positionieren? Wie ist er überhaupt innerhalb der HTML-Hierachie einzuordnen. Als Tochter-Element von <abbr>. Oder völlig ausserhalb der HTML-Hierachie (da mit CSS erzeugt)?
Fragen über Fragen.
Ich freue mich auf antworten :)
schö
stefan
-
Hallo Stefan,
Ich experimentiere Grad ein bisschen und versuche mittels CSS meine
eigenen Tooltipps zu gestalten.Nett. :-)
Meine Frage: gibt es eine Möglichkeit den content zu positionieren?
Nein (1). Im CSS 2 wird eindeutig definiert, daß Benutzeragenten bei den
:before und :after-Pseudo-Elementen eindeutig mehrere CSS-Eigenschaften
ignorieren müssen, so auch das zu genauerer Positionierung notwendige
position. After heißt eben After.Standard: http://www.w3.org/TR/REC-CSS2/generate.html#before-after-content
Übersetzung: http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap12.html#heading-12.1�Wie ist er überhaupt innerhalb der HTML-Hierachie einzuordnen. Als
Tochter-Element von <abbr>. Oder völlig ausserhalb der HTML-Hierachie (da
mit CSS erzeugt)?Der Standard sagt letzteres. Genauer:
"Generated content does not alter the document tree. In particular, it is
not fed back to the document language processor (e.g., for reparsing)."Standard: http://www.w3.org/TR/REC-CSS2/generate.html#content
Übersetzung: http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap12.html#heading-12.2�(1) Es gibt jedoch andere Hacks, die sowas zu erzeugen zu versuchen. So
zum Beispiel die "Pure CSS Popups" von Eric Meyer. Allerdings
semantisch nicht so schön wie Deine Lösung.- Tim
--
Schreib mal wieder was:
http://aktuell.de.selfhtml.org/artikel/beitrag.htm
http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm-
Hallo Tim,
Im CSS 2 wird eindeutig definiert, daß Benutzeragenten bei den
:before und :after-Pseudo-Elementen eindeutig mehrere CSS-Eigenschaften
ignorieren müssen, so auch das zu genauerer Positionierung notwendige
position. After heißt eben After.Hatte ich mir aber schon fast gedacht. Schade.
(1) Es gibt jedoch andere Hacks, die sowas zu erzeugen zu versuchen. So
zum Beispiel die "Pure CSS Popups" von Eric Meyer. Allerdings
semantisch nicht so schön wie Deine Lösung.Genau um das semantisch Sinnvolle[tm] gings mir ja bei diesem Versuch (z.B. für Benutzer-Style-sheets u.s.w.).
Ich hatte eben noch folgende (etwas absurde/aufwändige) Idee:
HTML-Bereich:
<body>
Die Verwendung von
<span class="outer">
<abbr title="Cascading Style Sheets">
<span class="inner">
CSS
</span>
</abbr>
</span>
kann eine Seite nicht nur optisch sondern auch inhaltlich verbessern.
</body>CSS-Bereich:
body{
position:relative
}abbr{
border-bottom:none;
position:absolute;
top:0;
left:0;
}.outer{
position:relative;
}.inner{
position:relative;
}abbr:after{
content:"*";
font-size:0.8em;
font-family:Courier new,monospace;
font-style:normal;
color:#090;
vertical-align:super;
}abbr[title]:hover:after {
content:"'"attr(title)"'";
border:1px solid #900;
color:#900;
padding:1px;
background:#FFC;
}Die Idee dabei ist folgende:
<span class="outer"> wird relativ innerhalb des normalen Text-Flusses positioniert. Der Text-inhalt von <abbr> wird mittels <span class="inner"> relativ innerhalb von <span class="outer"> positioniert.Nur der 'Tooltipp' wird mittels <abbr> absolut innerhalb von <span class="outer"> positioniert (und "drängelt" somit den folgenden Text nichtmehr weg).
Klappt aber leider nicht. Vielleicht probier ich heut abend noch ein bisschen weiter.
Wobei diese Lösung (sofern sie eine ist) natürlcih schon wieder eher eine Spielerei wäre, nichtmehr für user-Style-Sheets nutzbar und somit ein bisschen sinnlos :\
Naja, mal schauen.
schö
stefan
-
Hi,
Ich experimentiere Grad ein bisschen und versuche mittels CSS meine eigenen Tooltipps zu gestalten. Dies erreiche ich mittels einer Kombination von Attribut-Selektoren für das "title"-Attribut, und den Pseudoklassen ":hover" und ":after".
haben wir das nicht alle schon mal probiert? ;-)
Hier Mein CSS-Code:
Versuche es doch mal z.B. mit
abbr:hover > span
in einem <abbr><span>title</span>abbr</abbr>.
Cheatah
--
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
Versuche es doch mal z.B. mit
abbr:hover > span
in einem <abbr><span>title</span>abbr</abbr>.
Das kannte ich auch schon, aber ich wollte ja das title-Attribut selbst mit CSS formatieren und nicht nur "simulieren". War auch eher als Experiment gedacht (wobei Deine Variante natürlich browserunspezifischer ist). Aber Danke für den Tipp.
schö
stefan
-