Skip to content

Create custom tooltips #499

Open
Open
@alexsb

Description

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.

Activity

alexsb

alexsb commented on Nov 17, 2021

@alexsb
ContributorAuthor

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

thinkh commented on Nov 17, 2021

@thinkh
Member

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

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

sgratzl

sgratzl commented on Nov 24, 2021

@sgratzl
Member

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

alexsb commented on Nov 29, 2021

@alexsb
ContributorAuthor

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

sgratzl

sgratzl commented on Nov 30, 2021

@sgratzl
Member
alexsb

alexsb commented on Nov 30, 2021

@alexsb
ContributorAuthor

@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 :).

self-assigned this
on Nov 30, 2021
thinkh

thinkh commented on Dec 3, 2021

@thinkh
Member

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

sgratzl commented on Dec 3, 2021

@sgratzl
Member

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    Create custom tooltips · Issue #499 · lineupjs/lineupjs