Vuetify - Add Tooltip to Button that is triggering a datepicker

1
votes

I want to add a v-tooltip to the v-btn I'm using to trigger the datepicker for a my charting application. Here is code that is working, before attempting to integrate the tooltip.

    <v-menu ref="menu" v-model="menu"
      :close-on-content-click="true"
      :return-value.sync="date"
      transition="scale-transition"
      offset-y
      min-width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-btn v-on="on"
          :style="{left: '50%', transform:'translateX(-50%)'}"
          light
          icon
        >
          <v-icon>mdi-pencil</v-icon>
        </v-btn>
      </template>
      <v-date-picker 
        v-model="date" 
        no-title 
        scrollable
        >
      </v-date-picker>
    </v-menu>

With the above, I click the button, I get the datepicker, all is good. I have tried a bunch of different ways to add a v-tooltip, e.g. wrapping the whole block, wrapping just the template and wrapping just the button. Wherever I place the tooltip code, it breaks the whole setup in that either the button doesn't show or the click on it isn't processed.

Buttons being ideal for tooltips, to reveal their functionality without having to click to find out, this seems like a reasonable thing to do. It is easy to use v-btn to trigger lists, but I find very few examples of people using buttons to display datepickers, even though lots of people are asking questions online about it. I'm hoping there is a technique for tooltips that can be used with a variety of pickers actuated from .

Any ideas?

1
vuejs2vuetify.js

1 Answers

1
votes

Fixed it for you, try now:

Demo: https://codepen.io/aQW5z9fe/pen/vYNdJwO?editors=1010

<v-menu
  ref="menu" 
  v-model="menu"
  :close-on-content-click="false"
  transition="scale-transition"
  offset-y
  min-width="290px"
>
  <template v-slot:activator="{ on: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on: tooltip }">
        <v-btn 
          v-on="{ ...tooltip, ...menu }"
          :style="{left: '50%', transform:'translateX(-50%)'}"
          light
          icon
        >
          <v-icon>mdi-pencil</v-icon>
        </v-btn>
      </template>
      <span>Tooltip</span>
    </v-tooltip>
  </template>
  <v-date-picker 
    v-model="date" 
    no-title 
    scrollable
    >
  </v-date-picker>
</v-menu>