Vue.js 工具提示组件无法使用Vuetify工作

我正在尝试在rails应用程序中使用。我不确定哪里出了问题，但这不起作用。帮我解决这个问题

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

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

问题与答案
工具提示

我将您的代码复制到了这里，它似乎工作正常。@sthotakura是的，但我不知道哪里出了问题。这是浏览器问题吗？您正在使用哪个浏览器进行测试？@hasan05 chromeany console错误？我将您的代码复制到该浏览器中，它似乎工作正常。@sthotakura是的，但我不知道哪里出了问题。这是浏览器问题吗？您正在使用哪个浏览器进行测试？@hasan05 chromeany控制台错误？

<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>