mui / mui/base-ui

[tooltip] Usage with non-DOM triggers

Open
#3,449 2 comments 0 reactions 0 assignees View on GitHub
component: tooltip type: enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.