Create custom tooltips

[alexsb]

Replace html tooltip with custom tooltip that appears immediately on hover (no delay). Custom tooltips could also be more advanced, including, for example, a larger scale version of the visualization.

[alexsb]

We use popper.js at datavisyn. It would be good if LineUp either also used popper, or gave us a structured way to implement it as a popper tool-tip.

[thinkh]

@alexsb LineUp uses already Popper.js 2 to open the menu and dialogs.

lineupjs/package.json

Line 145 in 6a6a724

"@popperjs/core": "^2.9.3",

[sgratzl]

can you clarify for what those custom tooltips should be used? and what the default content should be? cause it will create a lot of event handlers

[alexsb]

For more information about an item; the standard tool-tip is just not customizable and fast enough for a data visualization application.

[sgratzl]

what else is needed besides: https://codepen.io/sgratzl/pen/bGoGobq?editors=0010 ?

[alexsb]

@thinkh can you comment on the technical part (i.e., whether it's easy to convert this into a tool-tip in datavisyn applications).

In the codepen it doesn't look like a tool-tip atm :).

[thinkh]

Yes, with this we can add custom tooltips for whole rows. But we have also the use cases where we would need a tooltip for certain cells (e.g., showing a long text in a StringColumn, or a thumbnail and enlarge it in a tooltip). How would we do this?

[sgratzl]

two approaches I can see

1. create a special renderer that attaches to the rendered cell node and also handles the tooltip
2. use the same logic as in the context menu example where you use bubbling of events along with .target to find the hovered cell.