Allow tooltip on disabled ui.select
#4396
Simun17
started this conversation in
Ideas / Feature Requests
Replies: 1 comment 2 replies
-
|
Hi @Simun17, I can't reproduce your problem. b = ui.button('Click me').tooltip('This is a tooltip')
ui.checkbox('Enable', value=True).bind_value(b, 'enabled')
|
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Hey, thanks for quick reply! Sorry I wasn't clear enough, the component I tested specifically is select box: s = ui.select(["a", "b", "c"], value="a").tooltip("test")
ui.checkbox('Enable', value=True).bind_value(s, 'enabled') |
Beta Was this translation helpful? Give feedback.
-
|
Ah, I see. I overlooked the word "select". 🤦🏻♂️ The tooltip not showing up seems to be a strange bug (or feature?) of the underlying QSelect element. A plain Quasar example shows the same behavior: <html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2.17.3/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="q-app">
<q-select :options="['a', 'b', 'c']" label="Select" :disable="!isEnabled">
<q-tooltip>test</q-tooltip>
</q-select>
<q-checkbox v-model="isEnabled" label="Enable" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.17.3/dist/quasar.umd.prod.js"></script>
<script>
const app = Vue.createApp({
setup() {
return { isEnabled: Vue.ref(true) };
},
});
app.use(Quasar);
app.mount("#q-app");
</script>
</body>
</html>Luckily, we can simply wrap the with ui.element().tooltip("test"):
s = ui.select(["a", "b", "c"], value="a")
ui.checkbox('Enable', value=True).bind_value(s, 'enabled')
|
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi, I'm now trying to make a select button that disables when certain conditions are not met and I wanna display a tooltip when hovered over that says the reason why the select button is disabled. But the problem is that every time I disable the button, the tooltip is also disabled.
So that's the idea, make some specific tooltips (call them disable_tooltips) that are visible when the component is disabled and they give more info (such as how to enable the component or something similar). Or if someone knows, how would this be possible.
Beta Was this translation helpful? Give feedback.
All reactions