Блог

Я использую vuetify версии 2.3.10. Проблема, с которой я сталкиваюсь здесь, заключается в том, что сообщения всплывающей подсказки для второго контейнера отображаются в любом месте экрана, а не рядом со значком всплывающей подсказки. Для первого контейнера она отображается рядом со значком. Пожалуйста, помогите мне найти, где я ошибаюсь. Ниже приведен мой код.

 <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 . Однако есть 4 элемента ( <v-flex/> elements), которые имеют класс .tip-align , и с этим может возникнуть проблема.

Вы можете просто удалить attach=".tip-align" реквизит, поскольку он будет прикреплен к слоту по умолчанию по умолчанию (к вашим <v-icon/> элементам в вашем случае).

P.S. Если вы используете Vuetify 2.x, вы можете улучшить свой макет с помощью <v-row/> и <v-col/> .

Вот демо.