0

I can best describe my problem with an image:

Dotted line follows cursor. Tooltip appears on hover of the div at the back

I currently have the dotted vertical line (which is essentially a div) which follows the cursor on a 'mousemove' event bound to the div (the box with the black border) that contains the bar graphs. This is derived somewhat from the example here: Create dynamic vertical rule in d3

I also wish to show a tooltip when I hover over the containing div. While I can do that, the tooltip flickers whenever I move the cursor as the dotted line comes in the way of the div behind it 'blocking' the hover trigger.

If I change the z-index of the line to -1, the hover trigger fires normally and the tooltip does not flicker but the line goes behind all the other divs, which is not what I want visually (shown below - you can see the two dots of the line at the bottom of the image just below the tooltip).

Line goes behind with z index -1

How can I send the line behind the 'black-border' div so that I can still see it over it (like in the first image) but to not have it come in the way of the hover event that's showing the tooltip?

Currently, my CSS for the vertical line is:

.vertical-rule{
  width: 0px;
  height: 100%;
  position: absolute;
  border-right: 1px dotted #aaa;
  text-align: left;
  z-index: 1;
}
Community
  • 1
  • 1
slider
  • 12,810
  • 1
  • 26
  • 42
  • sounds like you need to jack up the z-index on all your divs so you can thread the needle just how you want; now, they are all competing for 0 and 1... – dandavis Nov 22 '14 at 05:57
  • @dandavis NOOOO! Please don't say that. Can I not just do it for the two concerned? – slider Nov 22 '14 at 06:06
  • well, there might be a way to use ".hover" instead of ":hover", along with mouse events. it also looks like just maybe, setting the background to transparent on the stuff in front of the line in your 2nd image might work. or maybe .whatev:hover { opacity: 0.66; } would be acceptable... – dandavis Nov 22 '14 at 06:14

0 Answers0