Tooltips don't show on disabled buttons

[mbouclas]

when a button has the disabled property applied the tooltip doesn’t show at all

[rstoenescu]

They will in v0.14, because you will be using a component (QBtn) instead of a native HTML element and this means total control over the buttons behavior, avoiding browsers handling state (like “disabled”).

[mbouclas]

thanks for that

[marcelo]

Still not working (v0.15.9)…

[joeyezekiel]

Is there a solution to this problem @rstoenescu ?

[s.molinari]

Where does it not work @joeyezekiel ?

https://jsfiddle.net/smolinari/30f2hdvn/1/

Scott

[jasonl]

@s-molinari Bit of a stale post but I looked at your code and it works because you use the “disable” directive, not “disabled” like the OP. Where does the “disable” directive come from? I’ve looked in the Quasar and Vue docs and don’t see it anywhere. It works, just curious where it’s coming from!

Jason

[metalsadman]

@jasonl disabled is native, while disable is a quasar prop use to put a quasar component in a disabled state. v.017 https://quasar-framework.org/components/button.html#Vue-Properties and v1 https://v1.quasar-framework.org/vue-components/button#QBtn-API

[Sweetyy]

Hi !

I just upgrading to Quasar v1.2.4 and the tooltip doesn’t show anymore when a q-btn is disable. Here is my code :

<q-btn dense no-caps label="See" @click="seeForm()" disable>
   <q-tooltip>Loading...</q-tooltip>
</q-btn>

Any idea ?

[s.molinari]

Wrap the button in a div.

https://codepen.io/smolinari/pen/BaaRMyE?editors=1010

Also, it’s better if you start a new thread and not reactivate old ones. Thanks!

Scott

[Sweetyy]

@s-molinari thank you for the answer and sorry for that !

[rubs]

A <div>or <span> works. But I still think @rstoenescu is right: “a component (QBtn) … means total control over the buttons behavior”. May I suggest reconsidering it for the future? Thanks.

[s.molinari]

@rubs - Considering what for the future?

Scott

[rubs]

Sorry, I thought the thread title made the point clear. I believe that tooltips may be even more important when a QBtn is disabled (to inform users the reason why it is disabled, for example). So I think tooltips should be enabled whether QBtns are disabled or not. It should be left to the programmers to decide if they want it to hide tooltips (e.g. using v-if). Wrapping a control in a div or span works, but it’s more of a trick than a solution IMO. Hope it’s clearer now.

[s.molinari]

If you wrap Qtooltip with QBtn, QBtn has no clue it’s there. Wrapping them both with a div takes it out of the QBtn, so the tooltip can work as it should. It’s not a trick, it is the solution.

Scott