时间戳

首页 > 解决方案 > 工具提示组件无法使用 Vuetify

vue.js - 工具提示组件无法使用 Vuetify

问题描述

我正在尝试在我的 rails 应用程序中使用https://vuetifyjs.com/en/components/tooltips 。我不确定我哪里出错了，但这不起作用。帮我找出问题所在。

当我尝试检查元素时，这就是它的显示方式

<div class="flex add-col-padding-left xs1 md6">
 <span class="tooltip tooltip--bottom">
  <div class="tooltip__content" style="left: 0px; opacity: 0; top: 12px; z-index: 0; display: none;">
   <i dark="" class="material-icons icon-black">
    question_answer
   </i> 
   <span>Tooltip</span>
  </div>
  <span></span>
 </span>
</div>

index.js

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify, {
  theme: colors
});

索引.vue

<v-tooltip bottom>
 <template v-slot:activator="{ on }">
  <i dark v-on="on" class="material-icons icon-black">
   question_answer
  </i>                          
 </template>
 <span>Tooltip</span>
</v-tooltip>

标签： vue.jsvuetify.js

解决方案

推荐阅读