margin-left mit jQuery abhängig von der Breite desselben Elements festlegen

[borisbaer]

Hallo, ich versuche gerade, mit jQuery dynamisch die margin-left property in Abhängigkeit von der width desselben Elements festzulegen. margin-left soll immer die Hälfte dieses width sein.

Es funktioniert ohne Weiteres für ein bestimmtes Element, jedoch soll es für alle individuell gelten. Hier mein bisheriger Code ...

if ( $node.hasClass( "map" ) ) {

   $(".tooltip.top").css("margin-left", -($(".tooltip.top").outerWidth()) / 2);

}

Da das Element mit der class tooltip je nach Textlänge in der Breite variiert, soll der Tooltip-Pfeil dynamisch positioniert werden. Damit er mittig ist, muss seine margin-left property immer die (negative) Hälfte der Breite des Tooltip-Elements haben.

Für jede Hilfe wäre ich sehr dankbar.

[Gunnar Bittersmann]

@@borisbaer

Da das Element mit der class tooltip je nach Textlänge in der Breite variiert, soll der Tooltip-Pfeil dynamisch positioniert werden. Damit er mittig ist, muss seine margin-left property immer die (negative) Hälfte der Breite des Tooltip-Elements haben.

Vermutlich nicht. Es ist selten eine gute Idee und in meist zu vermeiden, Styling mit JavaScript umzusetzen.

Was genau willst du erreichen?

😷 LLAP

[borisbaer]

Was genau willst du erreichen?

Ich möchte, dass der Tooltip mittig über dem Tooltip-Button erscheint, doch immer wenn sich die Breite des Tooltips verändert, verschiebt er sich. Ich habe versucht, es rein mit CSS zu lösen – ohne Erfolg. Es funktioniert nur, wenn die Breite des Containers statisch ist, also wenn man im Vorfeld sagt, der Tooltip hat nur 200px oder so. Ich greife da auch ungern zu einem Script, wüsste aber nicht, wie ich es sonst regeln sollte.

[borisbaer]

Autsch, manchmal sieht man den Wald vor lauter Bäumen nicht. Ich habe es nun doch mit CSS hingekriegt, es geht ganz einfach mit ...

 left: 50%; transform: translateX(-50%);

Ich weiß nicht, warum es hier mit margin-left versucht wurde. Habe das nicht hinterfragt. 🥴

[Gunnar Bittersmann]

@@borisbaer

Autsch, manchmal sieht man den Wald vor lauter Bäumen nicht. Ich habe es nun doch mit CSS hingekriegt, es geht ganz einfach mit ...

 left: 50%; transform: translateX(-50%);

Vermutlich nicht die beste Lösung.

Aber wenn du nicht aufmalst, was du erreichen willst, kann man dir nicht sagen, wie du’s am besten lösen kannst.

😷 LLAP

[borisbaer]

Na ja, im Grunde das: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top

Genauer kann ich es eigentlich nicht vermitteln.

[Rolf B]

Hallo borisbaer,

solche Tooltips kann man bauen, aber dann muss man auch einen Plan B für diejenigen Anwender haben, die ohne Maus unterwegs sind. Und ohne Augen.

Hover-Tooltips sind ein Relikt aus der Zeit, wo zugängliche Bedienung ignoriert wurde. Man kann sie höchstens auf interaktiven Elementen verwenden, wo sie durch :hover oder :focus aktiviert werden.

Rolf

[borisbaer]

Hallo Rolf,

danke, das versuche ich immer mitzudenken. Die Tooltip-Buttons sind auch per Tastatur erreichbar und werden auch von Screenreadern erkannt.

Es handelt sich um Tooltips für Marker auf einer interaktiven Karte.

[Gunnar Bittersmann]

@@borisbaer

Na ja, im Grunde das: https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top

Schon die Anforderung „Tooltip soll immer mittig zum betreffenden Element sein“ ist unsinnig.

Und die Anforderung „Tooltip soll immer über dem betreffenden Element sein“ auch, siehe Codepen, 1. Beispiel

Beim nativen Tooltip weiß der Browser zumindest, wohin er ihn platzieren kann. (2. Beispiel)

Und was Rolf sagte.

😷 LLAP

[Rolf B]

Hallo Gunnar,

bei deinem "handgemachten" Tooltip kommt hinzu, dass Assistenztechniken ihn - als Inhalt eines ::after Elements, nicht wahrnehmen dürften.

Was ein Screenreader zum title-Attribut sagt, weiß ich nicht. Aber ich habe einen Artikel gefunden, schon 5 Jahre alt. Ich hoffe, das ist nicht überholt.

https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/

Wenn die Lizenzbedingungen der Seite es zuließen, würde ich den in einen Selfblog-Artikel übersetzen. Da aber keine dastehen, heißt das: Nope!

Rolf

[borisbaer]

Hallo Gunnar,

danke für die Demonstration. Nun, der Tooltip muss nicht mittig sein, klar. Das dargestellte Problem kann bei mir durchaus auftreten bei kleinem Viewport.

Sicherlich gibt es einen Weg, dass sich ein Tooltip in so einem Fall automatisch verschiebt. Allerdings würde das wohl nur mit einem script machbar sein, oder?

[Gunnar Bittersmann]

@@borisbaer

Sicherlich gibt es einen Weg, dass sich ein Tooltip in so einem Fall automatisch verschiebt. Allerdings würde das wohl nur mit einem script machbar sein, oder?

Ja. Die Frage ist, ob man das wirklich machen will – und dabei womöglich einige Fälle vergisst zu beachten. Oder ob man mit dem vom Browser bereits implementierten title-Attribut nicht besser dran ist – was sich allerdings (noch) nicht stylen lässt.

😷 LLAP