shutterstock/rickshaw

Use of pointer-events: none; on non-svg items

Open

#84 opened on Jul 13, 2012

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (1,009 forks)batch import
enhancementhelp wanted

Repository metrics

Stars
 (6,540 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

In detail.css, you apply pointer-events: none; on .rickshaw_graph .detail to ensure that tooltips don't get hovered over and thus don't prevent other tooltips from popping up..

I find that there are two issues with that:

  1. pointer-events: none; shouldn't really be used for non-svg items as described in the spec
  2. it's impossible to hover over the tooltip itself, which might be nice if there is a link in there or something like that..

In my opinion, the approach of disabling pointer events and setting opacity: 0 to all tooltips would work much nicer if you enabled pointer events and then replace the opacity switch with a display: none/inline switch..

Works like a charm for me and everything is as expected

Cheers

Contributor guide

Research direction
Replace pointer events: none with display: none/inline switch for tooltips in detail.css.
Tech stack
javascript
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85