Put margins on v-tooltip-CodePudding

I have a text that displays when I hover a button. What I'd like is to set the tooltip a bit away from the button (without changing the button's size) because at the moment, it's appearing a bit on the button, they are way too close together.

<v-btn
  v-if="
    crosshairToggle &&
    (tn.length > 10 || tn.length == 0)"
  elevation="0"
  id="zoom_out"
  ref="zoomout"
  
  dark
  width="45px"
>
  <v-tooltip 
    right 
    open-delay="500"
  >
    <template v-slot:activator="{ on }">
      <v-icon v-on="on"  :color="textLightGrey">
        mdi-image-filter-center-focus
      </v-icon>
    </template>
  <span>Focus Mode - Enables when 10 or less actors are mapped</span>
</v-tooltip>

And since the tooltip is only appearing when I'm hovering the button, I can't inspect it. Does anyone know how to set margins on tooltips ?

CodePudding user response：

I believe the prop you are looking for is nudge-top (or nudge-bottom). Take a look at the v-tooltip API page.

Example:

<v-tooltip 
    right 
    open-delay="500"
    :nudge-top="-50"
>