Skip to content

Merge `ButtonTooltip` into `Button`

Warren Gifford requested to merge kr/button-tooltip into main

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. 🙂

Merge request reports

Loading