覆盖占位符时显示工具提示

Question

我想根据

v-model

是否为空动态显示文本框的标签。当没有用户输入时，占位符可以处理这个问题，但是一旦输入文本（这是问题的要点），我想显示一个工具提示。

我正在考虑使用

activator

和

v-if

等道具来控制工具提示的激活行为，但到目前为止我还没有成功。

<v-text-field v-model="model_text" 
    placeholder="My Label" hide-details>
  <v-tooltip v-if="model_text" activator="parent" location="start">
    My Label
  </v-tooltip>
</v-text-field>

Answer 1

我设法通过设置

:model-value=true

解决了这个问题，这对于使工具提示在发生更改时立即显示或隐藏至关重要。

此外，我选择父文本字段作为

target

，同时使用窗口的较大部分（在我的例子中，

#my-root

是一个表格）作为

activator

。

<v-text-field v-model="model_text" 
    placeholder="My Label" hide-details>
    <v-tooltip text="My Label" activator="#my-root" target="parent" 
    :model-value=true v-if="model_text" location="start">
    </v-tooltip>
</v-text-field>

所有这些都是使工具提示正常工作所必需的，因为它之前无法正常工作。