stefan: eigene "Tooltipps" mit "abbr[title]:hover:after"

Beitrag lesen

SELF-Forum

eigene "Tooltipps" mit "abbr[title]:hover:after"

stefan Homepage des Autors
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln