Using v-tooltip on custom (non native) component

I have a custom component which is being used application wide. But, in some place I want to show tooltip on hover on this component, according to vuetify docs this should work but it doesn’t because <custom-component /> is not a native component. And to have this functionality for native component a .native modifier is to be used.

Example: @click.native="someMethod" How can I do that to show v-tooltip.

I have tried wrapping <custom-component /> in a div but it isn’t working.

Below is sample code to get the gist.

<v-tooltip>
  <template v-slot:activator="{ on }">
    <custom-component v-on="on" />
  </template>
  <span>Tooltip text</span>
</v-tooltip>

Answer

custom-component should forward events from an element with v-on="$listeners" https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

I have tried wrapping <custom-component /> in a div but it isn’t working

If you do this then the events need to be bound to the div instead:

<div v-on="on">
  <custom-component />
</div>