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
I encountered that as well and I believe it's something required by Popper, but I haven't looked into it deeply.
Same "problem". Tonns o warnings with this message. Thanks for solving.
Will this issue be fixed? This is really annoying when you trying to debug something but recieving tonns of warnings in console.
I don't think there's a "fix", you just need to disable the hide modifier as well.
@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.
Most helpful comment
@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.