custom "placement" adjustment

[abvas]

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.

[atomiks]

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.

[abvas]

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!