[button] tooltipsText is plain text only and is not displayed if isEnabled = false

[pleku]

@vlipovetskii commented on Thu Jun 13 2019

I leverage this code
var HasElement.tooltipsText: String? get() = element.getProperty("title") set(value) { element.setProperty("title", value) }
to set tooltipsText for the components e.g. button.
I want to explain why a button is disabled.
Unfortunately, tooltipsText is not displayed if the component (e.g. button) is disabled.

Please find the sample project https://github.com/vlipovetskii/vaadin-issue-0003-prj
and
screenshot

---

@pleku commented on Mon Jun 17 2019

It seems that the native button indeed shows the tooltip when disabled https://jsfiddle.net/pqx1cgsm/

If our Button / <vaadin-button> works differently, then this issue should be in that particular component repository.

@vlipovetskii what components are you not seeing the tooltip in when using setEnabled(false) from Flow ?

---

@vlipovetskii commented on Mon Jun 17 2019

This is Button / . How to move the issue to Button repository ?

[pleku]

This can be easily reproduced in eg. https://vaadin.com/components/vaadin-button/html-examples

1. add title to a <vaadin-button>, see how tooltip is shown
2. make button disabled

Actual: tooltip not shown
Expected: tooltip is shown like with native <button>

[jouni]

Most probably caused by :host([disabled][disabled]) { pointer-events: none; } in Lumo.

[stefanuebe]

Heard about this issue now also multiple times from different customers (also for other components than buttons). It would be good to get rid of the need of "pointer-events:none" at all for our disabled components.

For other components that would mean to extend/rework the stylings. For instance a disabled text field currently shows hover effects, with pointer-events: auto.

[web-padawan]

This will be resolved by accessibleDisabledButtons feature flag added in #8513 and #8518 which makes disabled buttons react to focus and hover and in particular support using vaadin-tooltip. Closing as fixed.