palantir/blueprint

Tooltip with Popover with HOC issues : z-index and hide/unhide

Open

#3,900 opened on Dec 19, 2019

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: coreType: bughelp wanted

Description

Environment

  • Package version(s): 3.22
  • Browser and OS versions: Firefox/Chrome 78.0 and Windows 10

Steps to reproduce / Actual behavior

I created a sandbox to demonstrate the issue: https://codesandbox.io/s/blueprint-sandbox-l1ih1

When I create a HOC based on BlueprintJS tooltip component I get two weird behaviors when using popovers:

  1. Tooltips z-index is not consistent. Sometimes it appears behind popovers and sometimes it appears in front (on top of).

Video taken from the sandbox above: 2019-12-19_12-29-37

  1. The behaviour without HOC is that the the tooltip is hidden as soon as the popover is shown With HOC the tooltip appears always.

Expected behavior

  1. With HOC, the tooltip should not be shown if the popover is open
  2. Tooltips should be consistent. They should always be on top of everything.

Possible solution

Is this an issue with popperjs? I see the version in latest Blueprint is 1.15.0. Does latest version fix this?

Consider switching to other popup js lib. See this comment: https://github.com/popperjs/popper.js/issues/808#issuecomment-557480207

Contributor guide

Tech stack
reacttypescriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the HOC wrapper used in the sandbox and examine how Blueprint's Tooltip and Popover components manage z index and visibility. Check if the issue is related to popper.js version 1.15.0 and consider updating to a newer version. Look into the CSS stacking context caused by the HOC and ensure tooltips hide when popovers are shown by tracking popover open state in the HOC.