How to Enable Angular Material Tooltips Over Disabled Buttons

Tooltips are user-triggered messages which display a text label identifying an element, such as a description of its function, or provide additional information about the feature included in it.

Google’s Material Design tooltip section includes:

Tooltips display informative text when users hover over, focus on, or tap an element.

A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.

Angular Material Tooltip

The Angular Material tooltip provides a text label that is displayed when the user hovers over or long-presses an element. The Material team has made it very simple to use tooltips through the use of the matTooltip directive.

Tooltips and Disabled Buttons

Often, tooltips might be used on buttons to further explain its expected behavior and/or the outcome of the action performed by clicking on it.

Angular Material tooltips don’t show when the host element is disabled. This is due to the tooltip being triggered by the DOMmouseenter event, which will not fire for disabled elements, at least on most browsers.

In most cases, this is okay. If the button is disabled, the user cannot act and therefore no explanatory information is necessary. However, imagine the scenario where you want to let the user know why that button is disabled.

Solution

A solution to this issue is adding matTooltip to either a child or a parent element. It really depends on your personal preference and how your HTML+CSS is structured.

• Child element:

• Parent element:

Both examples above use isButtonEnabled as a control flag to determine whether the button should be enabled or not. matTooltipDisabled allows the tooltip to be displayed only when the button is disabled.

Please let me know if this was useful to you.