Enable tippy on disabled elements via opt-in

[bpolaszek]

Hello there,

The following piece of code:

<template>
  <button type="button" :disabled="isDisabled" v-tippy="tippyContent">Click me</button>
</template>

<script setup>
let disabled = $ref(false);
let tippyContent = $computed(() => disabled ? "You cannot perform this action" : "Please click here");
</script>

will actually not display tippy You cannot perform this action when disabled is false, which is probably intentional (otherwise... it's a bug!).

If it's not a bug, how about having a v-tippy-force directive to enforce showing the tippy on a disabled element? In my case, i want the user to know why they clicking on that button has been disabled.

vue-tippy v6.x

Thanks! Ben

[KABBOUCHI]

you can use a wrapper element

<template>
  <span v-tippy="tippyContent">
       <button type="button" :disabled="isDisabled">Click me</button>
   <span>
</template>

[bpolaszek]

That's what I did, but it's not really convenient since what I'm doing is creating a <Button> component (so, expected behavior is a button, not a span).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[laurens94]

@KABBOUCHI Is there a good reason not to allow Tippy on disabled elements?

I think the combination makes a lot of sense, especially since it's common to have tooltips on disabled elements explaining why it's disabled.

Plain HTML would also show a tooltip in such a case:

<button title="Disabled due to reason..." disabled>Hover me</button>

[KABBOUCHI]

@KABBOUCHI Is there a good reason not to allow Tippy on disabled elements?

I think the combination makes a lot of sense, especially since it's common to have tooltips on disabled elements explaining why it's disabled.

Plain HTML would also show a tooltip in such a case:

<button title="Disabled due to reason..." disabled>Hover me</button>

@laurens94 button can't receive mouse events if its disabled, u can wrap the button in a element and put the tooltip there

related issue https://github.com/atomiks/tippyjs/issues/286