Popover caret/arrow is misaligned with its anchor element

[therealbrad]

Description

The popover caret (arrow/nub) that points from the tooltip card to its anchor element is not properly centered on the anchor. The caret appears offset by several pixels from the target element (in my case, a notification bell icon in a nav bar), creating a visual misalignment between the tooltip and the element it references.

Steps to Reproduce

1. Set up a NextStep onboarding tour with a step targeting a small icon element (e.g., a notification bell icon in a nav bar)
2. Navigate to the step that highlights the icon
3. Observe the popover caret position relative to the anchor element

Expected Behavior

The popover caret should be centered directly beneath (or above/beside, depending on placement) the anchor element it is pointing to.

Actual Behavior

The popover caret is visually offset from the center of the anchor element by approximately several pixels, making it appear to point to the wrong location.

Screenshot

I think it may be due to the sticky header on the page preventing it from calculating the vertical placement correctly.
Here is the simplified version of my page:

<div class="m-4">
  <div>
    <div class="flex flex-col">
      <div class="shadow-md top-0 z-50">
        <div id="header-container" class="items-center p-2 rounded-sm">
          <div class="flex items-center justify-between">
            <div class="flex">
              <!-- ...logo and nav links... -->
            </div>
            <div class="flex items-center gap-4 shrink-0">
              <button aria-label="Search" class="... h-9 w-9">...</button>
              <button aria-label="Help menu" class="... h-9 w-9">...</button>
              <!-- This is the NextStep tour target -->
              <button aria-label="Notifications (0 unread)" 
                      data-testid="notification-bell-button" 
                      class="... h-9 w-9 relative">
                <svg class="lucide lucide-bell h-5 w-5">...</svg>
              </button>
              <button aria-label="User menu" class="...">...</button>
            </div>
          </div>
        </div>
      </div>
      <!-- ...page content below... -->
    </div>
  </div>
</div>