v-tooltip 仅用于附加图标答案

【问题标题】：v-tooltip only for append-iconv-tooltip 仅用于附加图标
【发布时间】：2020-04-28 14:38:57
【问题描述】：

我继续与 Vuetify 打交道。告诉我如何在 v-text-field 中为 append-icon 应用工具提示 only？现在工具提示根本不适用于图标！ codepen

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-text-field
        label="Regular"
        v-on="on"
        append-icon="event"
        style="max-width: 200px"
      />
    </template>
    <span>Tooltip</span>
  </v-tooltip>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

没有办法解决这个问题（通过一些 API 选项）- 组件将图标呈现在文本区域之外（如果需要，请打开 GitHub 问题/功能）。

无论如何，如果您使用简单的<v-icon> 组件，它就可以正常工作。

这里有额外的细节： Wrapping v-icon with v-tooltip inside text-field?

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    url: 'https://stackoverflow.com/'
  }
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-text-field label="Hello world">
          <v-tooltip slot="append">
            <template v-slot:activator="{ on }">
                <v-icon v-on="on" color="primary" dark>
                  mdi-calendar
                </v-icon>
              </template>
            <span>My Tooltip</span>
          </v-tooltip>
        </v-text-field>
      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

【讨论】：

谢谢。我是这么想的）