Vuetify: v-card fills up entire v-tooltip-CodePudding

I am creating a tooltip that appears when an icon is clicked or hovered on; I am using a v-card inside the tooltip:

            <v-tooltip bottom min-width="15%">
              <template v-slot:activator="{ on, attrs }">
                <v-icon small
                  v-bind="attrs"
                  v-on="on">
                  mdi-information
                </v-icon>
              </template>

              <v-card flat height="100%" width="100%" >
                <v-card-text>
                  Tooltip Text is here
                </v-card-text>
              </v-card>
            </v-tooltip>

The v-card does not fill the tooltip entirely. How do I make the v-card fill the entire tooltip?

CodePudding user response：

You can easily fill your entire tooltip as I mention there cards are not used here it's made on sheet which could be filled with span tag inside span Whatever you want to write you can...

  

    <v-tooltip bottom>
    <template v-slot:activator="{ on, attrs }">
            <v-icon color="primary"
              dark
              v-bind="attrs"
              v-on="on" left>
            mdi-information
          </v-icon>
          </template>
          <span>Bottom tooltip</span>
    </v-tooltip>

CodePudding user response：

It should be better to use <v-menu> tag with open-on-hover prop instead of <v-tooltip>.

Example:

<v-menu
  open-on-hover
  offset-y
  :close-on-content-click="false"
>
  <template v-slot:activator="{ on, attrs }">
    <v-icon
      small
      v-bind="attrs"
      v-on="on">
      mdi-information
    </v-icon>
  </template>

  <v-card>
    ...your card data
  </v-card>
</v-menu>

Codepen working example