Getting alert ``preventOverflow` modifier is required by `hide``
See original GitHub issueI 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:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@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’shidemodifier was not specified in docs.I don’t think there’s a “fix”, you just need to disable the hide modifier as well.