时间戳

首页 > 解决方案 > v-tooltip 显示在屏幕上的任何位置。滚动后不显示在 v 图标旁边

vue.js - 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>

标签： vue.jstooltipvuetify.js

解决方案

我能够在需要滚动卡片内容的小屏幕上复制此问题。这可能与您<v-tooltip attach=".tip-align"/>尝试附加具有.tip-align. 但是，有 4 个元素（<v-flex/>元素）具有类，.tip-align并且可能存在问题。

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

PS 如果你使用的是 Vuetify 2.x，你可以使用<v-row/>and来改进你的布局<v-col/>。

这是一个演示。

推荐阅读