Open nickgirardo opened 1 year ago
As a quick update, it looks like the has()
approach does work quite well if tooltip.grouped
is set to false
. I've enabled this flag for other reasons and it seems to work fairly well for this case, however this is still far from ideal as only 80% of users browsers support this feature.
@nickgirardo, you can add cursor style attribute setting via data.onover
and data.onout
option.
checkout the online working demo:
data: {
...
onover: function() {
this.$.main.select("rect").style("cursor", "pointer");
},
onout: function() {
this.$.main.select("rect").style("cursor", null);
}
}
Description
I have a chart with points which have onclick events attached. I'd like to change the cursor to a pointer only when a point is hovered.
I have seen #220, however this doesn't quite get me where I want to be. The
.bb_event_rect
seems to cover the entire body of the chart, whereas the hitboxes for the onclick events only cover a small radius around my points. I wouldn't want my users to expect there to be something happening when they click on the body of a chart when in fact my onclick events will not be firedThere are a few other options I've considered which do not seem to work for me either: Css attached to the point itself. I've attemted to add styles along the lines of
This has a few issues
.bb-event-rect
is consuming some hover/ move event which causes the browser to never actually be hovering over the pointAnother approach I briefly considered was changing the cursor to a pointer whenever a point is expanded with css along the lines of
Unfortunately, this approach also seems like a non-starter
:has()
pseudo-class is experimental and only enabled in firefox if a flag is set. caniuse has support for this feature at around only 80% currentlyIs it possible to set the cursor to a pointer when a user hovers over the exact area where an onclick event would be triggered?
Steps to check or reproduce