v工具提示显示在屏幕上的任何位置.滚动后不显示在v图标旁边

Question

我使用的是vuetify 2.3.10版本。我在这里面临的问题是，secong容器的工具提示消息显示屏幕上的任何位置，而不是显示在工具提示图标旁边。对于第一个容器，它显示在图标旁边。请帮我找出哪里出了问题。下面是我的代码。

<template>
<v-card class="mb-12">
<v-form :model='user'>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right tip-align">
<v-text-field
label='Name'
v-model='user.name'>
</v-text-field>
<v-tooltip attach=".tip-align" left>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on"><v-icon class="icon-align" small slot="activator" dark color="primary">info</v-icon></span>
</template>
<span>Please enter name.</span>
</v-tooltip>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left tip-align">
<v-text-field
label='Address'
v-model='user.address'>
</v-text-field>
<v-tooltip attach=".tip-align" left>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on"><v-icon class="icon-align" small slot="activator" dark color="primary">info</v-icon></span>
</template>
<span>Please enter your address</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right tip-align">
<v-text-field
label='Position'
v-model='user.position'>
</v-text-field>
<v-tooltip attach=".tip-align" left>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on"><v-icon class="icon-align" small slot="activator" dark color="primary">info</v-icon></span>
</template>
<span>Please enter position.</span>
</v-tooltip>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left tip-align">
<v-text-field
label='Number'
v-model='user.number'>
</v-text-field>
<v-tooltip attach=".tip-align" left>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on"><v-icon class="icon-align" small slot="activator" dark color="primary">info</v-icon></span>
</template>
<span>Please enter your number</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card>
</template>

Answer 1

我能够在需要滚动卡片内容的小屏幕上复制这个问题。它可能与尝试附加具有.tip-align类的元素的<v-tooltip attach=".tip-align"/>有关。然而，有4个元素(<v-flex/>元素(具有.tip-align类，这可能存在问题。

您可以删除attach=".tip-align"道具，因为默认情况下它将附加到默认插槽(在您的案例中是<v-icon/>元素(。

附言：如果您使用Vuetify 2.x，则可以使用<v-row/>和<v-col/>改进布局。

这是一个演示。