[bug] <rh-tooltip> Doesn't always point to the corresponding item

[ryan-u]

Describe the bug

The point on the tooltip won't accurately point to the item that it is describing on hover. For example, in an rh-card, the tooltip will try to stay in the bounds of the rh-card and, as a result, the tooltip point doesn't point to the correct item. This can be very confusing with multiple tooltips side-by-side and provides for a bad user experience.

Screenshots

No response

Steps to reproduce

https://codesandbox.io/p/sandbox/pensive-antonelli-nfxxz3?file=%2Fsrc%2FApp.tsx%3A11%2C5-42%2C11

Hover over the two tooltips in the card.

Expected behaviour

I expect the tooltip to point to the correct item that it represents, no matter the imaginary boundaries or containing elements.

Element HTML

<div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <rh-card>
        <h2 slot="header">Test Header</h2>
        <div className="card-body">
          <h3>Testing</h3>
          <p className="card-subheading">By test</p>
          This is a card
        </div>
        <div slot="footer">
          <rh-tooltip>
            <span slot="content">Red Hat Enterprise Linux</span>
            <img
              src="https://picsum.photos/id/1019/300/200"
              alt="RHEL"
              height={30}
              width={30}
            />
          </rh-tooltip>
          <rh-tooltip>
            <span slot="content">Red Hat OpenShift</span>
            <img
              src="https://picsum.photos/id/1019/300/200"
              alt="RHEL"
              height={30}
              width={30}
            />
          </rh-tooltip>
        </div>
      </rh-card>
    </div>

Operating System (OS)

macOS

Browser

Chrome, Safari, Firefox

Additional browser or assistive technology info

No response

[bennypowers]

repro in HTML https://codepen.io/pen/?template=PoLRbxp&editors=1100