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 (6,540 stars) (1,009 forks)batch import
enhancementhelp wanted

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

Tech stack
javascriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS pointer events property knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Look at the file detail.css in the repository, specifically the class .rickshaw graph .detail. The issue proposes replacing 'pointer events: none' with 'display: none/inline' for tooltips and enabling pointer events. Implement the change as described in the issue body.