jBox

jBox copied to clipboard

Is is possible to attach a jbox tooltip to a disabled button? I'd like to inform the user the reasons the button is disabled using a tooltip.

I've disabled the button like so:

$('.btn-print').attr('disabled', true);

(Have also tried $('.btn-print').prop('disabled', true); )

And attaching the tooltip as:

new jBox('Tooltip', { attach: '.btn-print' });

Obviously if I hover of the button, the cursor changes to not allow but the jbox doesn't appear. If I comment out the disable, it works fine.

It's probably because a disabled button doesn't trigger cursor events. I tried to attach the jBox to the container and then check in the onOpen method if the button is disabled to decide if the tooltip should be shown. But unfortunately this didn't work properly. See more here: https://github.com/whatwg/html/issues/5886

You could use CSS to show that the button is disabled and handle the functionality of the disbaled button manually as a workaround.

you should probably provide the reasoning for why the button is disabled via other means. as someone using keyboard would be unable to access the tooltip, since the control won't take focus.

this (having a tooltip on a disabled button that is only available to those who can hover with a mouse) would reasonably be flagged in an accessibility audit.

All that said, playing around with the demo site, i can't access a tooltip with keyboard on enabled controls (let alone see where my focus indicator is). So seems there are even bigger accessibility issues to resolve.