Set cursor to pointer only when hovering over onclick target box

[nickgirardo]

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 fired

There 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

.bb-chart .bb-shapes.bb.circles .bb-circle {
    cursor: pointer;
}

This has a few issues

• I'm unable to cause these styles to be applied. I'm not sure if the .bb-event-rect is consuming some hover/ move event which causes the browser to never actually be hovering over the point
• Even if this worked, the onclick event's hitbox seems slightly larger than the point itself, meaning that at some points the cursor would not be a pointer when the user's click would trigger an event

Another approach I briefly considered was changing the cursor to a pointer whenever a point is expanded with css along the lines of

.bb-chart:has(.bb-circle._expanded_) {
    cursor: pointer;
}

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% currently
• Once again, the hitbox isn't the same size (as discussed in e.g. #1211)

Is 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

[nickgirardo]

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.

[netil]

@nickgirardo, you can add cursor style attribute setting via data.onover and data.onout option.

checkout the online working demo:

• https://jsfiddle.net/netil/rkq01t9v/

data: {
   ...
    onover: function() {
        this.$.main.select("rect").style("cursor", "pointer");
    },
    onout: function() {
        this.$.main.select("rect").style("cursor", null);
    }
}