如何使vuetify工具提示在列表中起作用?

这是我的代码:

<div id='app'>
<v-app>
<v-list-tile-content>
<v-list-tile v-for="(item, index) in items" :key="item.id" >

  <v-list-tile-action>
    {{index+1}}.
  </v-list-tile-action>

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">

      <v-list-tile-content>
          <v-list-tile-title v-text="`${item.title}`"></v-list-tile-title>
      </v-list-tile-content>

    </template>
    <span>Tooltip</span>
  </v-tooltip>

</v-list-tile>
</v-list-tile-content>
</v-app>
</div>

https://codepen.io/zbyszek-kisy/pen/RwWqarj

而且我不知道为什么当我尝试将鼠标悬停在列表项上时为什么工具提示没有显示