tooltip mittels css

Beitrag von **devolo01** » 12.09.2010, 18:28

Hallo in die Gemeinde,

ich beschäftige mich ja nun schon sehr lange mit css und auch html doch leider stehe ich gerade auf nen Schlauch.

Und zwar würde ich gerne einen Tooltip in meine Webseite integrieren. Derzeit realisiere ich es wie folgt

Code: Alles auswählen

<span title="Tool Tip">info</span>

soweit so schön, nun möchte ich aber diesen Tooltip mittels CSS formatieren. Doch leider finde ich keinen Möglichkeit den title zu bearbeiten.

Folgendes habe ich bisher versucht:

Code: Alles auswählen

span &#91;title&#93; &#123;
 background&#58;#fff;
&#125;
span &#91;title~="*"&#93; &#123;
 background&#58;#fff;
&#125;
span &#91;title="*"&#93; &#123;
 background&#58;#fff;
&#125;

Leider alles ohne Erfolg. Nun meine Frage kann mit evtl. einer das passende Attribut zu dem selektor nennnen oder auch eine alternative zum Thema Tooltip.

VG

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **chris21** » 12.09.2010, 19:06

Code: Alles auswählen

<a href="#" class="tooltip">info<span class="tooltiptext">Tool Tip</span></a>

tooltiptext ist per css display:none;

und bei a.tooltip:hover span.tooltiptext{display:block;}

Rest solltest Du selbst rausfinden

Beitrag von **devolo01** » 12.09.2010, 19:18

Jup das reicht mir voll und ganz

. Heist das, dass ich das Title Attribut mittels CSS garnicht direkt ansprechen kann oder?

VG

Beitrag von **chris21** » 12.09.2010, 19:46

Zumindest kannst Du die Darstellung des Title Inhalts m.W. nicht per CSS definieren.

Mit so einer Konstruktion wie

span[title]

sprichst Du nur alle span Elemente an, die ein title Attribut gesetzt haben, aber nicht das title Attribut selbst.

Beitrag von **drupal-master** » 13.09.2010, 23:14

schau dir mal
https://www.cssplay.co.uk/index

Stu Nicholls ist der CSS Guru schlechthin.
Einige Beispiele für Tooltips sind auf der seite.