CSS dynamische Positionierung eines Elements möglich?

[Sven]

Hallo zusammen,

ich möchte einfache Tooltips nutzen.
Dazu habe ich mir gedacht, ich könnte einfach ein vorborgenes Element (in meinem Fall ein span-Element) beim "hovern" einblenden.

Soweit funktioniert das auch, aber wenn ich an einen der 4 Ränder meines Viewports komme, geht der Tooltip einfach über den Rand hinaus und ist nicht mehr lesbar.

Ich habe das mal versucht, über ein DIV darzustellen.

Kann man das irgendwie so verändern, dass das eingeblendete Element immer im Div bleibt und sozusagen mitwandert? Also z.b. immer links unterhalb des gehoverten Elements steht, aber nach rechts wandert, wenn links kein Platz ist oder nach oben über das Element, wenn unten kein Platz ist?

Ich hoffe, Ihr versteht, was ich meine.

Sven

[Tabellenkalk]

Hallo,

Dazu habe ich mir gedacht, ich könnte einfach ein vorborgenes Element (in meinem Fall ein span-Element) beim "hovern" einblenden.

Was ist "hovern"?
Frage für einen Freund, der nur mit dem Smartfon surft…

Gruß
Kalk

[Sven]

Hallo Kalk,

Dazu habe ich mir gedacht, ich könnte einfach ein vorborgenes Element (in meinem Fall ein span-Element) beim "hovern" einblenden.

Was ist "hovern"?
Frage für einen Freund, der nur mit dem Smartfon surft…

> Das title-Element erzeugt (wie auch das title-Attribut in HMTL) beim Hovern mit der Maus ein Tooltip – das sollte nicht stören, sondern sogar hilfreich sein.

Sag doch Deinem Freund, er möge mal Gunnar danach fragen, der erklärt noch viel besser als ich. (wundert mich eigentlich, dass Du erst heute fragst und nicht schon letzten Freitag. Wird doch nicht daran liegen, dass Du Dich das bei Gunnar nicht traust, oder?😉)

Sven

[Gunnar Bittersmann]

@@Sven

Was ist "hovern"?
Frage für einen Freund, der nur mit dem Smartfon surft…

> Das title-Element erzeugt (wie auch das title-Attribut in HMTL) beim Hovern mit der Maus ein Tooltip – das sollte nicht stören, sondern sogar hilfreich sein.

Sag doch Deinem Freund, er möge mal Gunnar danach fragen, der erklärt noch viel besser als ich.

Der erklärt dir dasselbe wie Kalks Freund (das, was er in eine Frage verpackt hat). Wichtige Informationen sollten nicht in einem Tooltip stehen, weil dieses nicht für alle zugänglich ist.

Wenn es dir bspw. um die Erklärung von Icons geht, muss diese anders erfolgen, bspw. auf einer Hilfe-Seite. Ein Tooltip kannst du als zusätzliche Hilfe anbieten, als Abkürzung für Mausschubser.

I.A. sollte eine Webanwendung aber bedienbar sein, ohne dass Nutzer Hilfe-Seiten studieren müssen. Das heißt, Icons sollten intuitiv verständlich sein und/oder mit für alle sichtbarem Text beschriftet sein.

---

Wird doch nicht daran liegen, dass Du Dich das bei Gunnar nicht traust, oder?😉

„Der beißt nicht, der will nur spielen.“

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Tabellenkalk,

Was ist "hovern"? Frage für einen Freund, der nur mit dem Smartfon surft…

einfach den Finger draufhalten und einen Moment warten.

Benötigt, wie ich justamente belegen kann, in einem fahrenden Fahrzeug etwas Geduld und Frustrationsfestigkeit.

Rolf

[Rolf B]

Hallo Sven,

wenn du mit Klassen wir top/left/bottom/right arbeitest, kriegst Du das sicher hin, aber frei positioniert wirst Du JavaScript brauchen. Ich hätte gerade keine Vorstellung von einem passenden CSS Feature.

Rolf

[Sven]

Hallo Rolf,

wenn du mit Klassen wir top/left/bottom/right arbeitest, kriegst Du das sicher hin, aber frei positioniert wirst Du JavaScript brauchen. Ich hätte gerade keine Vorstellung von einem passenden CSS Feature.

Ich lade ohnehin Jquery und Jquery UI mit. Und da sind doch Tooltips mit drin. Leider weiß ich aber nicht, wie ich Jquery dazu bewege, meinen Span-text beim hovern dann als Tooltip zu verwerten.

Sven

[Gunnar Bittersmann]

@@Sven

ich möchte einfache Tooltips nutzen.

Warum tust du’s dann nicht? Einfache Tooltips = native Tooltips, d.h. title-Attribute.

Dazu habe ich mir gedacht, ich könnte einfach ein vorborgenes Element (in meinem Fall ein span-Element) beim "hovern" einblenden.

Soweit funktioniert das auch, aber wenn ich an einen der 4 Ränder meines Viewports komme, geht der Tooltip einfach über den Rand hinaus und ist nicht mehr lesbar.

Bei den nativen Tooltips tritt dieses Problem nicht auf: Codepen.

S.a. das zu Tooltips Gesagte.

🖖 Живіть довго і процвітайте

[Random2356]

Hi,

wie die anderen schon geschrieben haben, ist das title-Attribut meistens die beste Lösung. Ansonsten gibt es auch JavaScript-basierte Lösungen, die gut erprobt sind und für Deinen Anwendungsfall geeignet sein könnten. Popper zum Beispiel.

Gruß Random

[Sven]

Hallo,

wie die anderen schon geschrieben haben, ist das title-Attribut meistens die beste Lösung. Ansonsten gibt es auch JavaScript-basierte Lösungen, die gut erprobt sind und für Deinen Anwendungsfall geeignet sein könnten. Popper zum Beispiel.

Ja, sehe das auch so.
Habe mich für eine der Lösungen entschieden, die Wahl fiel zwischen Tooltipster und jbox.
Beide gut, Tooltipster nutze ich schon in einem Projekt und diesemal habe ich jbox genommen.

Danke an alle Antworter.

Sven