Vuetify: v-card fills up entire v-tooltip

user_13653441 0
Viewed 412

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%" class="ma-0 pa-0">
                <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?

vuetify.js vue.js
3 Answers

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

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

user_92752240

Add this to the v-tooltip content-class="pa-0". You need to override the padding: 5px 16px; that's on .v-tooltip__content. Reference to Vuetify docs on why you use content-class instead of class (detached element like v-dialog and v-menu).

user_67623100
Related