Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltip Issue and Proposal

See original GitHub issue

This issue outlines some issues with the current Tooltip component implementation, and also suggest some proposed change.

Issues

1. The Tooltip HTML ins’t friendly for layout.

Suppose you have a button which you want to add a tooltip.

<div className="button_container">
    <Tooltip text={_("Edit")}>
        <EditButton />
    </Tooltip>
</div>

The Tooltip component will wrap the button component with its HTML.

<div className="button_container">
    <span class="reactist popover__wrapper reactist tooltip__wrapper">
        <button />
        <span class="reactist popover" style="top: 276.25px; left: 1033.81px;">
        <span class="reactist popover__content reactist tooltip__text">Edit</span>
        </span>
    </span>
</div>

button is no longer a direct child of button_container, but rather the tooltip__wrapper. This could make CSS layout trickily in some scenario. Ideally, the tooltip should not insert extra HTML to the tooltip target and also its container.

3. The HTML mockup structure is not friendly for browser rendering performance

Each tooltip is placed beside the target element.

The more optimize HTML structural will be to place tooltip as an immediate child of <body>

<body>
    ....
<div className="tooltip">Edit</div>
</body>

2. Tooltip is always rendered even when not show

We want to support the lazy rendering of a tooltip - only render tooltip when it is showing, because some tooltip could be expensive to render.

For instance, Todoist’s due date tooltip

Proposal

The Tooltip does not introduce any mockup to the target component and it will be rendered as an immediate child of <body>
The Tooltip should be lazy rendered: it’s only rendered when the target component is on-hovered. Should be great if Tooltip could accept a function() if lazy rendering is needed

<Tooltip content={renderExpensiveComponent}>
</Tooltip>

Reference: Material UI Tooltip

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:11 (11 by maintainers)

Top GitHub Comments

1reaction

stkao05commented, Feb 28, 2020

Alright, I think we can give it a try, given that it is relatively lightweight.

1reaction

stkao05commented, Jul 26, 2019

Had a brief look at reach’s tooltip, but I don’t think it will fit our usage as they seem to only support text-only tooltip.

They implement their tooltip via CSS pseudo-element.

.react-live-preview:before {
    content: "Preview";
}

Top Results From Across the Web

Proposal: Native solution for tooltips on the web platform #4537

I was discussing with someone how every website on the planet uses some kind of tooltip to display hints or additional information about...

Add issue status (open/closed) and tags to issue tooltips - GitLab

Add issue status (open/closed) and tags to issue tooltips · Description · Proposal · Links / references · Linked items. 0.

Refactor of Command/Tooltip proposal - FreeCAD Forum

Small description of problem: 1. In Ukrainian if menutext and tooltip is the same string translation looks very bad. I want have ability...

ChangeProposals/notitlev2 - HTML WG Wiki - W3C

The following Change Proposal relates to: the HTML WG decision on alt validity requirements and Resolve ISSUE-80: Document conformance and device dependent ...

Please revisit the downvote/upvote tooltips on meta sites

Making proposals more formal might not only solve the “what does a downvote mean” issue, but could also enforce a “proposal/option to vote ......