Vuetify, tooltips: what are "on" and "attrs" for?

Question

I looked for "Tooltip" in the Vuetify documentation, and I found this example:

<v-tooltip left>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >Left</v-btn>
  </template>
  <span>Left tooltip</span>
</v-tooltip>

What are on and attrs for? And why are they mandatory?

Also, is this the correct way to listen for the click event?

<v-tooltip bottom>
  <template v-slot:activator="{ on }">
    <v-btn v-on="{...on, click: onToggle }" icon>
      <v-icon>mdi-eye</v-icon>
    </v-btn>
  </template>
  Show password
</v-tooltip>

Answer 1

I could explain myself what that means, but I consider that this video explains it a lot better I let you the time where it stars explaining the utility of v-on and attrs

Just take a look to the section Transparent wrappers

https://youtu.be/7lpemgMhi0k?t=1314

Summary

v-on: Binds a series of listener functions

More in: https://vuejs.org/v2/api/#v-on

$attrs: Stores the attributes setted in the parent component, you can reuse them in a inner component

More in: https://vuejs.org/v2/api/#inheritAttrs

You can find other usages besides of what is shown in the video, but transparent wrappers are a common use case.