Wir lösen das CSS Overflow Problem das jeder hat! [Tutorial/Deutsch]

Du brauchst einen Hoster?

Heute lösen wir ein Problem mit Tooltips und CSS im allgemeine. Häufig ist es so das per Overflow: hidden; Child Elemente abgeschnitten werden. Dieses Problem kann man einfach mit JavaScript lösen und das machen wir in diesem Video.

Fragen oder Probleme? Werde Teil der Community! (Kostenlos)

Unterstütze den Channel:

Kapitel:
00:00 Intro
00:32 Setup
00:58 Problem
03:47 Lösung
07:19 Style
08:09 Position

Links aus dem Video:

#tutorial #webdesign #webdevelopment

Meine Social Media Seiten:

Copyright by Johannes Schiel / Unleashed Design

[psychedelic-chi]

Viele Wege führen nach Rom. Deiner gefällt mir sehr gut;- Auch wenn viele immer sagen das geht doch auch alles mit CSS, ich find Lösungen in JS einfach schöner ;- Danke dafür!

[philippkitzmuller]

witziger Zufall hatte gestern ganau dieses problem
danke für die Lösung werde ich gleich morgen umsetzten

[bhBlacky]

es gibt ne möglichkeit.

wenn du den parent in nen weiteren container verschachtelst den zb. .wrapper nennen, im wrapper setzen wir dann ein transform: scale(1) rein.
In der tooltip klasse, das position absolute mit fixed ersetzen.. jetzt ist das overflow aufgehoben. danach funktioniert zwar top, bottom usw nich mehr, aber kannst da wieder mit transform und margins oftmals aushelfen.

so kann man mit pure css den overflow aushebeln.

[ThomasJunkOS]

Frage: Kann es sein, dass das eigentliche Problem in der Schachtelung von "position: absolute" innerhalb von "position: relative" zu suchen ist, weil "absolute" sich nur auf das darüberliegende "relativ" plazierte Element bezieht und nicht aus dem eigentlichen Fluss heraushebt. Ich bin kein CSS-Pro, aber ich glaube, wenn man das ohne das darüberliegende "relativ" positionierte Element macht, könnte es funktionieren... oder?

[ralfhein]

wie funktioniert ein Tooltip auf mobilen Geräten, da es kein hover Effekt gibt. Wird es mit ein i im Kreis gekennzeichnet, weil der Anwender so es nicht erkennen kann oder liege ich da falsch. Es ist bestimmt interessant, mal zu wissen. Da es schwierig für den Anwender auf mobilen versteckte Mitteilung Effekte rüberzubringen, wie bei den Mouse Hover.
Aber dein Video war wieder lehrreich gewesen. Mach weiter so.

[jeuner]

Die CSS Lösung ist....Overflow Hidden nicht zu benutzen XD

[PicSta]

Viel Aufwand für so einen Tooltip. Ich überlege gerade, ob dies nicht doch irgendwie mit zwei Elternelementen funktioniert, das erste bekommt ein padding-top, in diesem könnte man dann den Tooltip platzieren. Vermutlich ist das der Content mit zu viel „gap“ nach oben... Ich werde es mal testen, wenn ich Zeit habe. Ich benutze tooltips so gut wie nie und wenn dann nutze ich data-Attribut dafür.

[espiat]

wieso JS? CSS hat alles was du brauchst