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>

Answer 1

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>