UiButton tooltip when disabled

[EmilMoe]

I noticed that the tooltip is only working when the button is not disabled? What's the reason behind this?

My save button is disabled until the form is valid, but I would like to display a tooltip saying something about this.

If there's a good reason not to have the tooltip, I don't want to propose a PR

[hyvyys]

The tooltip doesn't show up because the root node of UiButton is a <button> (a poor choice imho), and a disabled button doesn't get any mouse events.

The workaround is to wrap your UiButton in another element and let that be the tooltip toggle. But I'm having issues with this when using tooltip with v-if...

[sysebert]

you can use a title on it which should do what you want?

<button title="I still work when disabled" disabled>Button Text</button>

https://jsbin.com/riwulemehe/edit?html,output

[EmilMoe]

That's not really what I wanted as I wanted to keep the UI

[sysebert]

I was just using "button" as a placeholder for whatever you ended up naming your component.

import UiButton from 'keen-ui/lib/UiButton';

Vue.component('ui-button', UiButton);

<template>
  <ui-button
    color="primary"
    title="I still work when disabled"
    type="primary"
    disabled>
    Button Text
  </ui-button>
</template>

[hyvyys]

What we're after is to keep the UiTooltip as well. Does applying title do that?

pt., 20 mar 2020, 00:56 użytkownik sysebert notifications@github.com napisał:

I was just using "button" as a placeholder for whatever you ended up naming your component.

import UiButton from 'keen-ui/lib/UiButton'; Vue.component('ui-button', UiButton);

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/JosephusPaye/Keen-UI/issues/469#issuecomment-601469210, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE6ZWLQMED6MGTV2C763363RIKWLVANCNFSM4I3N3HIQ .