tooltip mittels css

[devolo01]

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 [title] {
 background:#fff;
}
span [title~="*"] {
 background:#fff;
}
span [title="*"] {
 background:#fff;
}

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

[chris21]

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

[devolo01]

Jup das reicht mir voll und ganz . Heist das, dass ich das Title Attribut mittels CSS garnicht direkt ansprechen kann oder?

VG

[chris21]

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.

[drupal-master]

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.