微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

v-tooltip显示在屏幕上的任何位置滚动后不显示在v图标旁边

如何解决v-tooltip显示在屏幕上的任何位置滚动后不显示在v图标旁边

我正在使用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>

解决方法

我能够在需要滚动显示卡内容的小屏幕上复制此问题。它可能与您的<v-tooltip attach=".tip-align"/>有关,试图附加具有.tip-align类的元素。但是,有四个元素(<v-flex/>元素)具有.tip-align类,并且可能存在问题。

您可以仅移除attach=".tip-align"道具,因为它默认情况下将附加到默认位置(在您的情况下,将附加到<v-icon/>元素上)。

P.S。如果您使用的是Vuetify 2.x,则可以使用<v-row/><v-col/>来改善布局。

这里是demo

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。