Tooltip wird ohne "overflow" angezeigt

Hallo, ich habe folgenden Aufbau:

Elementor-Premium-Karussel --> Template(mit Video und Tooltip)

Das Tooltip wird nun leider vom Karussel-Rand abgeschnitten und tritt über dessen Grenzen hinaus, so kann man leider nur kleinere Texte verwenden.

Hier kann man sich das anzuschauen: Klick

Ich habe im OceanWP --> Custom CSS versucht folgende Einstellungen zu machen:

@media  {


    .elementor-element
    .elementor-widget
    .elementor-widget-eael-tooltip .elementor-widget-container
    .eael-tooltip-text
    .eael-tooltip-top
    .eael-tooltip
    .elementor-widget-wrap
    .elementor-column-wrap
    .elementor-column
    .elementor-row
    .elementor-section
    .elementor-section-wrap
    .elementor-inner
    .premium-carousel-wrapper
    {
        overflow: inherit;
    }   
}

Leider war hier kein Treffer dabei und der Tooltip wird immer noch vom Rand des Karussels begrenzt.

Kann mir jemand sagen, was dort stehen müsste bzw. welches Element auf "inherit" gestellt werden muss?

Vielen Dank für Hilfe.

Habe jetzt mal Varianten probiert wie [COLOR=#0000ff].(KlassedesKarussels) {overflow: visible}[/COLOR]

oder auch [COLOR=#0080ff]#(IDdesTooltips) {overflow: visible !important}[/COLOR]

das hat aber auch keinen Erfolg gebracht.

..........

Wäre dankbar für Hilfe.

Vielen Dank für deine Hilfe.

Habe mit popper.js.org probiert den Tooltip selbst nachzubauen - mit teilweisem Erfolg. Funktioniert ab mehreren Buttons auf der gleichen Seite nicht mehr und führt zu Komplikationen, wenn der Text zu groß wird und mit anderen Elementen überlappt.

Werde deshalb als nächstes Variante 2 aus dem Video ausprobieren.

Wäre das aber nicht im Grunde das Gleiche, als wenn ich einen Tooltip auf "überdeckend" stelle per CSS ?

Habe nochmal herauskristallisiert, welche Elemente betroffen sind. Es sind:

class="eael-tooltip"
class="eael-tooltip-content"

bzw:

class="eael-tooltip-text"

Jetzt dachte ich mir, wenn ich:

.eael-tooltip-text {overflow: visible}

mache, dann wird das alles andere überlappen, ohne abgeschnitten zu werden vom Container/Karussell. Wahrscheinlich darf aber auch kein übergeordneter Container auf "overflow: hidden" gestellt sein...

Ich habe im Quellcode noch im übergeordneten "Premium-Carousel-Wrapper" gefunden:

aria-hidden=\"true"\

Hat es damit vielleicht etwas zu tun?

Zitat von r23

Noch einmal, ein Tooltip ist meiner Meinung nach nicht für lange Texte geeignet.

verwende doch einfach Popover...

Erstmal vielen Dank nochmal für deinen Kommentar. Habe nun Popover verwendet.

Meine Selbstgeschriebenen haben nicht in Elementor funktioniert, deshalb habe ich ein Plugin verwendet. Das Ergebnis ist das gleiche, wie bei Tooltips, nur etwas schlechter. Habe das zur Veranschaulichung HIER mal nachgebaut mit Erläuterung.

Ergebnis: sie werden beschnitten und können im Premium-Karussel nicht geklickt werden. Funktionieren aber einzeln ohne Karussel.