Vuetify - добавить всплывающую подсказку к кнопке, которая запускает датпикер

Question

Я хочу добавить v-tooltip к v-btn, который я использую, чтобы запускать datepicker для моего графического приложения. Вот код, который работает, прежде чем пытаться интегрировать всплывающую подсказку.

    <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>

С вышеуказанным, я нажимаю кнопку, я получаю datepicker, все в порядке. Я пробовал кучу разных способов добавить v-подсказку, например, обернуть весь блок, обернуть только шаблон и обернуть только кнопку. Куда бы я ни поместил код всплывающей подсказки, он нарушает всю настройку, так как либо кнопка не отображается, либо нажатие на нее не обрабатывается.

Кнопки идеально подходят для всплывающих подсказок, чтобы раскрыть их функции без необходимости щелкните, чтобы узнать, это кажется разумным поступком. Использовать v-btn для запуска списков легко, но я нахожу очень мало примеров людей, использующих кнопки для отображения датпикеров, хотя многие люди задают вопросы об этом в Интернете. Я надеюсь, что есть метод для всплывающих подсказок, который можно использовать с различными сборщиками, активированными из.

Есть идеи?

Answer 1

Исправлено, попробуйте сейчас:

Демо: 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>