[bug]: Tooltip host element not hidden and interfering with layout

[gfellerph]

🐞 Describe the bug

The host element of the <post-tooltip> is interfering with page layout. It has an initial display: inline which renders with a minimal margin-like space on the page. While the shadow DOM contents are hidden, the tooltip host element itself is shifting elements on the page.

The second issue with this is that the host element has the role of tooltip, but the hidden shadow DOM marks the accessible name as invisible to screen readers.

<post-tooltip role="tooltip">Hello there</post-tooltip> will print warnings in accessibility checkers like axe-devtools and lighthouse.

🛠️ To Reproduce

Steps to reproduce the behaviour:

Add a couple of tooltips between two paragraphs or inline and switch their display property between inline and inline-block. You should see a slight shift in layout.

Patched with display: inline-block:

Upatched, display: inline

✨ Expected behavior

Tooltips should initially pass lighthouse and axe-devtools checks and never interfere with layout in any way.