Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to fix Tooltips inside a scrollable container.

See original GitHub issue

from the docs.

Tooltips inside a scrollable container

You may encounter issues with tooltip positioning when it’s given to an element within a scrollable container. Firstly, when the element is no longer visible, the tooltip will stay stuck within the viewport. Secondly, it transitions between position updates. To solve this, simply specify a flipDuration of 0 and add the following popperOptions:

tippy('.mySelector', {
  flipDuration: 0,
  popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      }
    }
  }
})

Issue Analytics

State:
Created 6 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

KABBOUCHIcommented, Dec 7, 2017

It should be, anyway you can wait for v2 😃, it much faster and simpler.

1reaction

KABBOUCHIcommented, Dec 6, 2017

https://github.com/KABBOUCHI/vue-tippy/releases/tag/v1.0.0

Top Results From Across the Web

Tooltip inside a scrollable component - Stack Overflow

Inside the div I have multiple cards. One of the cards has a tooltip on it. I want the tooltip to be displayed...

Tooltip offset inside scrollable container · Issue #1974 - GitHub

When placed inside a scrolling container like an overflown div, tooltip must be appended to another element that has relative positioning ...

Experience in Escape CSS Overflow - Medium

Share from my experience in solving this problem. Step 1. Use proper CSS for the container and the tooltip. We still use overflow-x:hidden...

Tooltip | Mineral UI

The Tooltip will still react to viewport edges and scrolling. ... Tooltip will attempt to stay visible in an overflow: scroll container.

Tooltips - Bootstrap

Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc). Triggering tooltips on hidden ...