Logo
Hi, Sean S

Alignment 

<div class="text-center">
  <v-tooltip left>
    <template v-slot:activator="{ on }">
      <v-btn color="primary" dark v-on="on">Left</v-btn>
    </template>
    <span>Left tooltip</span>
  </v-tooltip>

  <v-tooltip top>
    <template v-slot:activator="{ on }">
      <v-btn color="primary" dark v-on="on">Top</v-btn>
    </template>
    <span>Top tooltip</span>
  </v-tooltip>

  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-btn color="primary" dark v-on="on">Bottom</v-btn>
    </template>
    <span>Bottom tooltip</span>
  </v-tooltip>

  <v-tooltip right>
    <template v-slot:activator="{ on }">
      <v-btn color="primary" dark v-on="on">Right</v-btn>
    </template>
    <span>Right tooltip</span>
  </v-tooltip>
</div>

A tooltip can be aligned to any of the four sides of the activator element

Visibility 

<v-container fluid class="text-center">
  <v-row
    class="flex"
    justify="space-between"
  >
    <v-col cols="12">
      <v-btn @click="show = !show">toggle</v-btn>
    </v-col>

    <v-col cols="12" class="mt-12">
      <v-tooltip v-model="show" top>
        <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon color="grey lighten-1">mdi-cart</v-icon>
          </v-btn>
        </template>
        <span>Programmatic tooltip</span>
      </v-tooltip>
    </v-col>
  </v-row>
</v-container>

Tooltip visibility can be programmatically changed using v-model.