Tooltip component requires custom code outside the component

[pursuitofleisure]

The Tooltip component only outputs the tooltip text, and does not work by itself unless the user manually places it inside a couple of wrapper divs with mandatory classes:

<div class="relative inline-block [--tooltip-arrow-size:20px]">
  <div class="inline-block peer/target">
    <.button aria-describedby="tooltip-md-top">MD</.button>
  </div>
  <.tooltip direction="top" id="tooltip-md-top">Tooltip text</.tooltip>
</div>

The styling within the Tooltip component relies on the specific classes of those wrapper divs in order to show on hover, along with some element to trigger the tooltip. This requires a lot of manual work for the user, and I think this would work better if those wrapper divs were also included in the component, and offered slots for both the tooltip and the trigger element (button, link, etc.).

We would also need to make sure the ID of the tooltip matches the aria-describedby attribute of the trigger element for accessibility purposes.