Search code examples
javascriptvue.jsv-tooltip

v-tooltip stops working when element is disabled

<button v-tooltip="'text'" :disabled=true>Some button</button>

I need the tooltip explaining why the button is disabled, but when I do, tooltip is disabled also.

Solution

  • From this issue on the project:

    The point with this is, that it's actually not an issue related to v-tooltip, but a browser-specification. Depending on the browser you use, some might and some other might not emit events for disabled elements. In this case, Firefox seems to emit events for disabled buttons and chrome doesn't.

    As a workaround you might wrap the button in a div to be able to use v-tooltip on it.

    Example

    <div v-tooltip="'text'"><button :disabled=true>Some button</button></div>