CSS tooltips, beweglich und einfach erweiterbar.

[overflow]

Wie einfach es geht, darauf kam ich wegen canvas. Dort wird es z.B. durch canvas rgb-Farbbereiche bewirkt.
Denn canvas stellt Texte leider unscharf dar.
Hier hab ichs einfach auf html transferiert.
Man kanns z.B. auf arrrays usw. erweitern. 'bubble' läßt sich als Parameter verwenden, wie sonst auch alles.
Am code sieht man, es ist total einfach. An sich reicht ein tooltip (name), dem jeder Aufruf seine eigenen Inhalte als Parameter zuweist:
die relative Position, den Inhaltstext und das individuelle CSS.
Im Beispiel sind es noch 2 tooltips mit demselben CSS.
Einfacher gehts wohl nicht. Dürfte mit jedem browser laufen.
Weitere CSS-Beispiele wären viell. abwechslungsreich.

 

[fRaNkLiN]

Was genau ist jetzt das Besondere daran? Mit JavaScript bewegte Tooltips gibt's doch schon lang?

 

[Umbel]

Wenn man JS für ein Funktion benötigt ist es kein CSS-Tooltip

 

[overflow]

Na ja, CSS ist ja drin ;-) Ohne JS bewegt sich nix.
Und es ist viel einfacher, als was man sonst so im web sieht.
Wie kann man bitte direkt auf den text zugreifen, habe ich vergessen.
Hier wird er eingebaut: name.appendChild(document.createTextNode(txt));
Wie geht txt als Parameter, oder geht das gar nicht, ihn danach zu ersetzen?
Ok, geht, wird gleich im link geändert.

 

[Umbel]

Wenn ich deine Frage richtig verstehe willst du an createTextNode() ein String-Objekt übergeben und dieses später ändern und hoffst das sich der Text dann auch ändert? Das geht nicht, da diese Funktion einfach nur den Inhalt ausliest und das DOM manipuliert, wenn du den Text nachträglich ändern willst musst du das Objekt suchen und ändern.

 

[overflow]

Habs grad eben erledigt, wie man jetzt dort sieht. Alles geht als nur ein einziges tooltip mit beliebig oft anderen Parametern. Das CSS ist also auch nur ein Parameter, hier von 'solo'.
Kürzer gehts wohl nicht. Ein paar weitere CSS wären vielleicht nett.

 

[Umbel]

Ich seh ehrlich gesagt immernoch nich DEN Vorteil gegenüber eines echten CSS-Tooltips

- Es benötigt JS
- Die Variante mit den Parametern benötigt zusätzliche Rechenleistung für etwas das keinen wirklichen Vorteil bringt.

Das einzige was echt nett ist, dass der Tooltip mit der Maus wandert =)

 

[overflow]

Ja, geht ums Wandern als Hündchen an der Mäuseleine ;-)
Bei canvas ist das besonders angebracht.