[tooltip] Usage with non-DOM triggers
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
Hi! I’m trying to use Base UI Tooltip with Konva (canvas library), but Konva shapes are not real DOM elements, so the usual pattern doesn’t work.
Right now I’m using the tooltip handle API, which works, but I want to confirm whether this is the intended approach or if there's a better workaround.
What I’m doing now
```tsx
const handle = Tooltip.createHandle();
```
On Konva mouseenter:
```tsx
handle.store.update({
activeTriggerId: id,
open: true,
instantType: 'click',
payload: {
date: e.target.attrs['tick-date'],
time: e.target.attrs['tick-time'],
tick: e.target.attrs['tick-text'],
position: {
x: e.evt.clientX - 100,
y: e.evt.clientY + 10,
},
},
});
```
On mouseleave:
```tsx
handle.store.update({
activeTriggerId: null,
instantType: 'dismiss',
stickIfOpen: false,
open: false,
payload: undefined,
});
```
then
```tsx
{({ payload }) => payload && }
function TooltipContent({ payload }: TooltipContentProps) {
const { position } = payload;
return (
// tooltip content
);
}
```
What I want to know
Is the tooltip handle the recommended pattern when dealing with virtual elements like Konva nodes?
Contributor guide
Assessment
This issue has not been assessed yet.