'How can I wrap a v-switch with a v-tooltip with Vuetify?

I attempted doing this like in the documentation https://vuetifyjs.com/en/components/tooltips/

<v-tooltip color="black" bottom >
        <template v-slot:activator="{ on, attrs }">
          <v-switch
            v-model="boo"
            v-bind="attrs"
            v-on="on"
            inset
          >
          </v-switch>
        </template>
        <div>
          Tooltip
        </div>
      </v-tooltip>

here : https://codepen.io/julienreszka/pen/BazvmYN But the tooltip isn't displayed and the css is wrong.

vue.jsvuetify.js


Solution 1:[1]

not really sexy, but you can wrap your switch in a div

<div 
  v-on="on"
  v-bind="attrs">
    <v-switch
      v-model="boo"
    ></v-switch>
</div>

Solution 2:[2]

v-tooltip is label of v-switch

<v-switch
  v-model="boo"
  inset>
  <template v-slot:label>
    <v-tooltip color="black" bottom>
      <template v-slot:activator="{ on, attrs }">
        <span
          v-bind="attrs"
          v-on="on">switch label</span>
      </template>
      Tooltip
    </v-tooltip>
  </template>
</v-switch>

switches document

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Chris Wang

Related Questions