javascriptvue.jsvuetify.js

Display information box when hovering over Info icon

I'm working on a project where I need to display a little information box when I hover over the i icon (PhInfo). We currently use Vuejs and Vuetify for most styling. What's the best way to get this result?

<v-col>
  <div>
    <strong> user info </strong>

    <PhInfo class="ml-3" :size="20" />
  </div>
</v-col>
Solution

  • The easiest way is to use Vuetify Tooltip directive:

    <v-btn v-tooltip="'Tooltip'"></v-btn>


    const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()

const app = createApp({ });

app.use(vuetify).mount('#app');
    <head>
  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@3.x/dist/vuetify.js"></script>
</head>

<div id="app">   
  <v-btn class='ma-5' v-tooltip="'Tooltip content'">
    Button
  </v-btn>
</div>