Tooltips don't show on disabled buttons
-
Is there a solution to this problem @rstoenescu ?
-
-
@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
-
@jasonl
disabled
is native, whiledisable
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 -
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 ?
-
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
-
@s-molinari thank you for the answer and sorry for that !
-
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. -
@rubs - Considering what for the future?
Scott
-
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 adiv
orspan
works, but it’s more of a trick than a solution IMO. Hope it’s clearer now. -
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