基于v-model状态动态显示文本框Tooltip的实现问题

你的需求是文本框为空时显示占位符，有输入时hover显示Tooltip，原代码的问题在于将v-tooltip作为v-text-field的子元素，结合v-if会导致激活器绑定异常，因为v-text-field的内部插槽并非放置Tooltip的正确位置。

下面提供两种可行的实现方式：

方式一：Tooltip包裹文本框，动态控制激活状态 #

通过v-slot:activator绑定文本框作为Tooltip的触发元素，同时通过计算属性控制Tooltip仅在输入内容存在时响应hover：

<template>
  <v-tooltip
    v-model="isTooltipActive"
    location="start"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-text-field
        v-model="model_text"
        placeholder="My Label"
        hide-details
        v-bind="attrs"
        v-on="on"
      />
    </template>
    My Label
  </v-tooltip>
</template>

<script>
export default {
  data() {
    return {
      model_text: '',
      _tooltipHovered: false
    };
  },
  computed: {
    isTooltipActive: {
      get() {
        // 仅当输入内容存在且鼠标hover时激活Tooltip
        return this.model_text && this._tooltipHovered;
      },
      set(val) {
        this._tooltipHovered = val;
      }
    }
  }
};
</script>

方式二：分离Tooltip与文本框，通过ref绑定激活器 #

将Tooltip与文本框分开，用ref指定触发元素，通过v-show控制Tooltip仅在有输入时可见：

<template>
  <div>
    <v-text-field
      v-model="model_text"
      placeholder="My Label"
      hide-details
      ref="textField"
    />

    <v-tooltip
      v-show="model_text"
      activator="ref:textField"
      location="start"
    >
      My Label
    </v-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model_text: ''
    };
  }
};
</script>

两种方式都能实现需求：输入为空时显示占位符，有内容后hover文本框会触发Tooltip显示标签。

内容的提问来源于stack exchange，提问作者Giulio