How to get tooltip or poopover like menu on list item

i have a simple list item like this

       items: [
            {  icon: 'mdi-dots-horizontal' },
            {  icon: 'mdi-format-italic' },
        ]

 

it is constructed like this in vue

        <v-list
                nav
                dense
              >
                <v-list-item-group
                  v-model="selectedItem"
                  color="primary"
                >
                  <v-list-item
                    v-for="(item, i) in items"
                    :key="i"
                  >
                    <v-list-item-icon>
                      <v-icon v-text="item.icon"></v-icon>
                    </v-list-item-icon>

                  </v-list-item>
                </v-list-item-group>
              </v-list>

for 2nd list item i want my result like shown below in the image

how to achieve like that in vuetify

CodePudding user response：

It's not too complicated and you only need to wrap your layout inside the <v-menu>

 <v-menu v-model="menu" :close-on-content-click="false" :nudge-width="200">
     <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="indigo"
          dark
          v-bind="attrs"
          v-on="on">
            Menu as Popover
        </v-btn>
      </template>
     <v-card>
         <v-list nav dense>
             <v-list-item-group v-model="selectedItem" color="primary">
                 <v-list-item v-for="(item, i) in items" :key="i">
                     <v-list-item-icon>
                         <v-icon v-text="item.icon"></v-icon>
                     </v-list-item-icon>
                  </v-list-item>
              </v-list-item-group>
          </v-list>
      </v-card>
  </v-menu>

For the script:

<script>
  export default {
    data() {
      return {
        menu: false,
        items: [{  icon: 'mdi-dots-horizontal' },
                {  icon: 'mdi-format-italic'   }]
      }
    }
  }
</script>

To see the full tutorial click Here