Popup not appearing centered

[Josh-Nicholson]

Current Behavior

It seems that whenever I use the popup functionality the popup always appears slightly off center (to the right).
I have tried it with and elements with differing text and icons, and the problem always remains.
None of the styles the popup uses have been changed in any way.

Example:

Expected Behavior

The popup should behave like it does in the docs, and always be centered unless you specifically change the placement property.

Steps To Reproduce

<script lang="ts">
   import { popup, type PopupSettings } from '@skeletonlabs/skeleton';

  const popupHover: PopupSettings = {
    event: 'hover',
    target: 'popupHover',
    placement: 'top'
  };
</script>

<button class="btn variant-filled [&>*]:pointer-events-none" use:popup={popupHover}>
	<span>(icon)</span>
	<span>Hover</span>
</button>
``




### Link to Reproduction / Stackblitz

_No response_

### More Information

_No response_

[endigo9740]

Hey Josh, so it's worthwhile to know that Popups work as a pair between the trigger and popover itself. This means, in your case, each button should have it's own instance of the following:

1. The trigger itself (the button)
2. The use:popover action on the trigger that points to a unique target
3. The HTML markup for the popover with it's matching data-popup value (the target itself)

You can see this concept demonstrated in our Loops example in the docs:
https://www.skeleton.dev/utilities/popups#handling-loops

I realize a lot of folks wish to reuse the same popup, but unfortunately that's not possible with the v2 implementation at the current time. In may work in some scenarios, but may be plagued with issues like you're seeing. It's my recommendation you split each popover into it's own instance.

Additionally, please feel free to share the markup used for the three buttons here for review. I'm not sure how you're setting the gap between (flex gap perhaps?) but that may have some impact as well.

[Josh-Nicholson]

Thanks for the response.

Using three buttons was just for demonstration purposes to show different text/button lengths and the problem still persisting.

Having a page with one button with a popup still results in the same behaviour and I cannot work out why it is happening.

All popups seem to be slightly right of center when using the 'top' placement

[endigo9740]

Hmm, I can't say I've come across that issue. Keep in mind that your popup does not live completely outside the scope of the DOM. So if you're doing something like this:

<div class="space-x-4">
    <button>Trigger 1<button>
    <div>Popup 1</div>
    <button>Trigger 2<button>
    <div>Popup 2</div>
    <button>Trigger 3<button>
    <div>Popup 3</div>
</div>

Then each popup instance will be affected by the margins provided by space.

To limit this, I tend to recommend something like this:

<div class="space-x-4">
    <div>
        <button>Trigger 1<button></button>
        <div>Popup 1</div>
    </div>
    <div>
        <button>Trigger 2<button>
        <div>Popup 2</div>
    </div>
    <div>
        <button>Trigger 1<button>
        <div>Popup 3</div>
     </div>
</div>

This will ensure placement is "neutral" and not affected by the cascade. Alternatively please note that the popups are not required to be co-located with the trigger in the DOM. Something like this would be perfectly valid.

<div>Popup 1</div>
<div>Popup 2</div>
<div>Popup 3</div>
<div class="space-x-4">
    <button>Trigger 1<button>
    <button>Trigger 2<button>
    <button>Trigger 3<button>
</div>

Aside from that, I can't think of anything that would cause that issue for you. If the above suggestion doesn't help, then we may need a minimal reproduction to help troubleshoot. If we can't replicate the issue, we'll have a hard time troubleshooting it.