1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Tooltip wird ohne "overflow" angezeigt

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von Anorm, 1. September 2020.

  1. Anorm

    Anorm Active Member

    Registriert seit:
    29. Juli 2020
    Beiträge:
    33
    Zustimmungen:
    1
    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:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
  2. Anorm

    Anorm Active Member

    Registriert seit:
    29. Juli 2020
    Beiträge:
    33
    Zustimmungen:
    1
    Habe jetzt mal Varianten probiert wie .(KlassedesKarussels) {overflow: visible}

    oder auch #(IDdesTooltips) {overflow: visible !important}

    das hat aber auch keinen Erfolg gebracht.

    ..........

    Wäre dankbar für Hilfe.
     
  3. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.346
    Zustimmungen:
    587
    Hallo,

    ein ToolTipp ist in der Regel nur wenige Wörter, die gut in einer Zeile passen.

    Beispiel
    https://popper.js.org/

    Mit einem Popover kannst du HTML an deinen Link anzeigen.

    Beispiel Video auf die schnelle:

     
    Anorm gefällt das.
  4. Anorm

    Anorm Active Member

    Registriert seit:
    29. Juli 2020
    Beiträge:
    33
    Zustimmungen:
    1
    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:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Hat es damit vielleicht etwas zu tun?
     
    #4 Anorm, 4. September 2020
    Zuletzt bearbeitet: 4. September 2020
  5. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    7.346
    Zustimmungen:
    587
    dies wird eigentlich richtig dargestellt. nur der Inhalt mit <p> springt erneut in irgendwelche Gestaltungsrahmen zurück.

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

    verwende doch einfach Popover...

    Bei {overflow: visible} wird es eigentlich nur hässlich
    https://css-tricks.com/the-css-overflow-property/
    =>
    Demo Seite für unterschiedliche Werte für overflow
    https://css-tricks.com/examples/OverflowExample/
     
    Anorm gefällt das.
  6. Anorm

    Anorm Active Member

    Registriert seit:
    29. Juli 2020
    Beiträge:
    33
    Zustimmungen:
    1
    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.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden