Merge `ButtonTooltip` into `Button`
Created by: courier-new
Disabled DOM elements do not produce mouse events. This means that a disabled element with a data-tooltip
attribute will not display a tooltip when hovered. This became relevant for Batch Changes a number of months ago due to our heavier-than-average reliance on tooltips to communicate how different parts of a complex interface state interact; most notably, communicating the reason why buttons or inputs are disabled in certain states.
At the time, the tooltip behavior was restored with a ButtonTooltip
component, merely a wrapper around <button>
where the tooltip attribute is applied to a <div>
that sits on top of <button>
in the DOM when it is in the disabled state. As we continue to migrate from <button>
to the official Wildcard <Button>
, however, this feels less appropriate to continue using.
This PR "merges" the workaround behavior from ButtonTooltip
into Button
, eliminating the need to maintain the separate ButtonTooltip
component. It also adds storybook stories to demonstrate the tooltip behavior on a disabled button.
Before | After |
---|---|
The component InputTooltip
currently exists for the same reason ButtonTooltip
did. A similar technique should be used for the various Form/*
components to remove the need for InputTooltip
, but I didn't want to overwhelm this PR so I left it for later.