v-tooltip

import { Tooltip } from 'vuetify/directives'

import { createApp } from 'vue'
import { Tooltip } from 'vuetify/directives'

const app = createApp({})
app.directive('tooltip', Tooltip)

<script setup>
import { Tooltip } from 'vuetify/directives'

const vTooltip = Tooltip
</script>

<!-- Simple text tooltip -->
<button v-tooltip="'Tooltip text'">Hover me</button>

<!-- With location -->
<button v-tooltip:top="'Top tooltip'">Hover me</button>

<!-- With configuration -->
<button v-tooltip="{ text: 'Tooltip', ...props }">Hover me</button>

<!-- Disabled tooltip -->
<button v-tooltip="false">No tooltip</button>

v-tooltip="'Tooltip text'"

v-tooltip="true"   // Empty tooltip (not shown)
v-tooltip="false"  // Disabled

v-tooltip="{
  text: string
  // Any VTooltip component props
}"

<template>
  <v-btn v-tooltip="'Click to submit'">
    Submit
  </v-btn>
</template>

<template>
  <div class="d-flex gap-2">
    <v-btn v-tooltip:top="'Top tooltip'">Top</v-btn>
    <v-btn v-tooltip:bottom="'Bottom tooltip'">Bottom</v-btn>
    <v-btn v-tooltip:left="'Left tooltip'">Left</v-btn>
    <v-btn v-tooltip:right="'Right tooltip'">Right</v-btn>
  </div>
</template>

<template>
  <div class="d-flex gap-2">
    <v-icon v-tooltip="'Delete'" @click="handleDelete">
      mdi-delete
    </v-icon>
    <v-icon v-tooltip="'Edit'" @click="handleEdit">
      mdi-pencil
    </v-icon>
    <v-icon v-tooltip="'Share'" @click="handleShare">
      mdi-share
    </v-icon>
  </div>
</template>

<script setup>
function handleDelete() {}
function handleEdit() {}
function handleShare() {}
</script>

<script setup>
import { ref, computed } from 'vue'

const disabled = ref(false)
const tooltipText = computed(() => 
  disabled.value ? 'Button is disabled' : 'Click me'
)
</script>

<template>
  <v-btn 
    :disabled="disabled" 
    v-tooltip="tooltipText"
  >
    Button
  </v-btn>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { name: 'Home', icon: 'mdi-home', tooltip: 'Go to homepage' },
  { name: 'Settings', icon: 'mdi-cog', tooltip: 'Open settings' },
  { name: 'Profile', icon: 'mdi-account', tooltip: 'View profile' },
])
</script>

<template>
  <v-list>
    <v-list-item 
      v-for="item in items" 
      :key="item.name"
      v-tooltip:right="item.tooltip"
    >
      <template #prepend>
        <v-icon>{{ item.icon }}</v-icon>
      </template>
      <v-list-item-title>{{ item.name }}</v-list-item-title>
    </v-list-item>
  </v-list>
</template>

<script setup>
import { ref } from 'vue'

const showTooltips = ref(true)
</script>

<template>
  <div>
    <v-switch v-model="showTooltips" label="Show Tooltips" />
    
    <v-btn v-tooltip="showTooltips ? 'Button tooltip' : false">
      Hover me
    </v-btn>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const longText = 'This is a very long text that will be truncated in the UI'
</script>

<template>
  <div 
    v-tooltip="longText"
    style="
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    "
  >
    {{ longText }}
  </div>
</template>

<template>
  <v-data-table :items="items" :headers="headers">
    <template #item.actions="{ item }">
      <v-icon 
        v-tooltip="'Edit'"
        size="small" 
        @click="edit(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon 
        v-tooltip="'Delete'"
        size="small" 
        @click="remove(item)"
      >
        mdi-delete
      </v-icon>
    </template>
  </v-data-table>
</template>

<script setup>
const items = []
const headers = []

function edit(item: any) {}
function remove(item: any) {}
</script>

<template>
  <v-btn v-tooltip="'Line 1\nLine 2\nLine 3'">
    Multiline
  </v-btn>
</template>

<template>
  <v-btn
    v-tooltip="{
      text: 'Custom tooltip',
      location: 'top',
      openDelay: 500,
      closeDelay: 200
    }"
  >
    Hover me
  </v-btn>
</template>

<template>
  <!-- Wrap disabled button in div for tooltip to work -->
  <div v-tooltip="'This action is not available'">
    <v-btn disabled>
      Disabled
    </v-btn>
  </div>
</template>

<template>
  <v-text-field label="Username">
    <template #append>
      <v-icon v-tooltip="'Username must be 3-20 characters'">
        mdi-help-circle-outline
      </v-icon>
    </template>
  </v-text-field>
</template>

<template>
  <v-card>
    <v-card-title>Card Title</v-card-title>
    <v-card-actions>
      <v-btn 
        icon
        v-tooltip:bottom="'Add to favorites'"
      >
        <v-icon>mdi-heart-outline</v-icon>
      </v-btn>
      <v-btn 
        icon
        v-tooltip:bottom="'Share'"
      >
        <v-icon>mdi-share-variant</v-icon>
      </v-btn>
      <v-btn 
        icon
        v-tooltip:bottom="'More options'"
      >
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<template>
  <v-btn
    v-tooltip="{
      text: 'Tooltip text',
      location: 'top',
      openDelay: 300,
      closeDelay: 100,
      maxWidth: 200,
      contentClass: 'custom-tooltip'
    }"
  >
    Button
  </v-btn>
</template>