Tooltip component

[Spiralis]

I have just starting to experiment with Kobalte and it seems promising and interesting so far. So, first of all, thanks for the great effort in creating this library :)

For my desktop app users, I was in the need to add a tooltip with more than what a html title-attribute allows.

Now, there is not Tooltip component, but I started to play around with the HoverCard, as it in many was does more or less what I want the tooltip to do. However, after using it a little I am having issues.

More specifically, the Trigger tag. It defaults to an anchor tag, which is normally not what I want. Granted, this can be changed, but this leads me to my next concern on this. I think if the Trigger could just reference whatever it got as children, and used that as a trigger then it would be perfect. Even for the normal HoverCard, I kinda think that the embedded rendering on an extra element, defaulting to an a element, is unnecessary magic. If you want an anchor, then you just add an a element yourself. Also, when using routing libraries it is fairly normal to use their or Link tags anyway. And, if you want to use the Kobalte Link you can then do that.

So, my suggestion is to change it to use the parent element in the props.children passed to the Trigger, and not generate any extra elements in the source for this.

[fabien-ml]

Hi, HoverCard is designed to allows sighted users to preview content available behind a link. The "real" Tooltip component is planned.

For the trigger problem here is my proposal:

In Kobalte there are several components that rely on a "trigger" to open/close their content like (Dialog, Popover, DropdownMenu, etc).

Currently the trigger component (like Popover.Trigger) is the rendered component, however in real life this trigger will look different depending on the situation (a button, a text, whatever).

The current API rely on the as prop to change the rendered component which is not the best way to do it (complex typings, and slow autocomplete performance in IDEs).

I've explored Radix UI Slot API, but it relies on React.cloneElement which can't be done in Solid because no VDOM, taking a ref and attaching listeners and DOM attribute manually to the element is not a solution too. So I ended up with this proposal:

// Before (Popover.Trigger render as MyButton)
<Popover.Root>
  <Popover.Trigger as={MyButton}>
    Open
  </Popover.Trigger>
</Popover.Root>

// After (Popover.Trigger render nothing and just provide props to the real "trigger")
<Popover.Root>
  <Popover.Trigger>
    {triggerProps => <MyButton {...triggerProps}>Open</MyButton>}
  </Popover.Trigger>
</Popover.Root>

And when there are listeners to chain:

import {composeEventHandlers} from "@kobalte/utils";

<Popover.Root>
  <Popover.Trigger>
    {triggerProps => (
      <MyButton
        {...triggerProps}
        onClick={composeEventHandlers([myOnClickHandler, triggerProps.onClick])}
      >
        Open
      </MyButton>
    )}
  </Popover.Trigger>
</Popover.Root>

[Spiralis]

That makes sense. I just discovered, like 5 mins ago, that as had more powerful features than I was aware of. I thought that it could only make primitive elements, not JSX style components.

Glad to hear that tooltip is planned :)

Thanks for your reply - and the wonderful work with this library!

[fabien-ml]

Tooltip is available in latest v0.9.3