Closed abvas closed 2 years ago
You can see it in their app.js
file, it's just the defaults basically:
tippy(".tippy_info",{theme:"light-border",arrow:!0});
If you want it to be constrained by the boundary like they have, specify popperOptions: { modifiers: [{name: 'preventOverflow', options: {boundary: theElement}}] }
(that container probably has position: relative; overflow: hidden
).
It doesn't use aligned placements (-start
/ -end
), it's just the preventOverflow
modifier making it look like that.
Thanks, you pointed me in the right direction.
The following popperOptions scheme worked for me:
popperOptions: {
modifiers: [
{
name: 'flip',
options: {
boundary: theParentElement
},
},
{
name: 'preventOverflow',
options: {
boundary: theParentElement
}
}
]
}
Thank you very much again!
Hey!
Please tell me how to achieve the same tooltip behavior as on this page:
https://expometro.co/en/exhibition/2022-los-angeles
As you can see the tooltip: is always within the parent element. always located above or below and not on the sides. at the far left: placement: 'top-end' or 'bottom-end'. at the far right: placement: 'top-start' or 'bottom-start'. That is, placement is automatically always at 'top-end', 'bottom-end', 'top-start' or 'bottom-start'.
If I use - placement: 'auto', then the tooltip is located within the parent, but appears not only from above or below, but also from the side and does not occupy the '-end' or '-start' position, but is always centered.
Thank you.