v-tooltip doesn't show component behind it

Question

I'm trying to implement v-tooltip following the example in their documentation but I cannot make it work. If I copy the example, i receive this error:

[Vue warn]: Property or method "on" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

if I declare property on the btn doesn't show up at all.

This is the template:

<v-tooltip bottom>
     <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Bottom</v-btn>
    </template>
    <span>Bottom tooltip</span>
</v-tooltip>

https://stackoverflow.com/questions/49079936/how-does-slot-activator-work-in-vuetify maybe this will help? — Daniel Turcich, Mar 20 '19 at 19:30
the activator represents the "on" as where the mouse is over the component (it can be changed to a property so it can be activated programatically). I don't really understand why the single curly braces. — Vallo, Mar 20 '19 at 19:33
what version of vue are you using? Versions prior to 2.6 don't support `v-slot` — thanksd, Mar 20 '19 at 19:36

score 6 · Accepted Answer · answered Mar 20 '19 at 19:41

You're probably getting that error because the version of Vue that you're using doesn't support the v-slot directive, which was added in Vue version 2.6.

Either update your version of Vue, or use the slot syntax supported in prior versions:

<v-tooltip bottom>
  <template slot="activator" slot-scope="{ on }">
    <v-btn color="primary" dark v-on="on">Bottom</v-btn>
  </template>
  <span>Bottom tooltip</span>
</v-tooltip>

v-tooltip doesn't show component behind it

1 Answers1

Linked