feat: add tip slot to customize tip content

[lstocchi]

What does this PR do?

This PR adds a tip slot so that one can customize the tip content.
In AI Lab we can use it to show the content multiline instead of a single line

Screenshot / video of UI

An example is the output i want to have in AI Lab.

What issues does this PR fix or reference?

N/A

How to test this PR?

run tests

• Tests are covering the bug fix or the new feature

[axel7083]

I am wondering if we should not use a so we could put whatever we want without being limited to text

[deboer-tim]

I assume you meant 'slot'. If so, +1. We may want more interesting tooltips in the future (e.g. include image or link) so slot would give more flexibility.

[lstocchi]

Not sure to get it. Do you want something like?

<div class="relative inline-block">
  <span class="group tooltip-slot {$$props.class}">
    <slot />
  </span>
  <div
    class="whitespace-nowrap absolute tooltip opacity-0 inline-block transition-opacity duration-150 ease-in-out pointer-events-none z-[10]"
    class:left="{left}"
    class:right="{right}"
    class:bottom="{bottom}"
    class:top="{top}"
    class:top-left="{topLeft}"
    class:top-right="{topRight}"
    class:bottom-left="{bottomLeft}"
    class:bottom-right="{bottomRight}">
    <slot name="tip" />
  </div>
</div>

[lstocchi]

@benoitf @axel7083 updated

[axel7083]

LGTM, thanks for taking the time to make the change! 🚀