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.


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 />

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>

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>

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

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

Screen Shot 2019-05-28 at 5 03 45 PM


  • 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}>

Reference: Material UI Tooltip

Issue Analytics

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

github_iconTop GitHub Comments

stkao05commented, Feb 28, 2020

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

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";
Read more comments on GitHub >

github_iconTop 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...
Read more >
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.
Read more >
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...
Read more >
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 ...
Read more >
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 ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found