question-mark
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.

Getting alert ``preventOverflow` modifier is required by `hide``

See original GitHub issue

I created a little React component that wraps tippyjs, and when I render long lists of elements and scroll down the tooltips attached to the elements that are not initially in the viewport compare far away from their elements. Searching through the issues I found this solution:

 const tippyConf = {
      animation: 'shift',
      size: 'regular',
      theme: 'qbox',
      html: this.props.title && '#with-title',
      // duration: 1000,
      arrow: true,
      popperOptions: {
        modifiers: {
          preventOverflow: {
            enabled: false
          }
        }
      }
    }

const tippy = Tippy(`#${this.state.randomId}`, this.state.tippyConf)

Now the positioning seems to work correctly but anytime I trigger the show of a tooltip get this in the console.

`preventOverflow` modifier is required by `hide` modifier in order to work, be sure to include it before `hide`!

If I change the config to this:

modifiers: {
          preventOverflow: {
            enabled: false
          },
          hide: {
            enabled: false
          }
        }

The warns disappear.

I would like know if I am breaking something using tippy like this

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

16reactions
abriginetscommented, Feb 5, 2018

@atomiks oh, thanks. I looked into a documentation and saw that there’s modifier hide: { enabled: false } so I copied it to my code and Popper now finished spamming to my console. The reason is that I moved to v2 from v1 where’s hide modifier was not specified in docs.

0reactions
atomikscommented, Feb 5, 2018

I don’t think there’s a “fix”, you just need to disable the hide modifier as well.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prevent Overflow - Popper
The preventOverflow modifier prevents the popper from being cut off by moving it so that it stays visible within its boundary area.
Read more >
React Popper component - Material UI - MUI
Clicking away does not hide the Popper component. If you need this ... Scroll around this container to experiment with flip and preventOverflow...
Read more >
bootstrap - UNPKG
offsetParent;\n // Skip hidden elements which don't have an offsetParent\n ... n *\n * Requires the `preventOverflow` modifier before it in order to...
Read more >
Tooltips · Bootstrap v5.0
Triggering tooltips on hidden elements will not work. ... Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier).
Read more >
bootstrap.bundle.min.js.map - Google Git
offsetParent;\n // Skip hidden elements which don't have an offsetParent\n ... n *\n * Requires the `preventOverflow` modifier before it in order to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found