Vue中为v-data-table单个表头（Retire）添加Tooltip不显示求助

Let's figure out why your tooltip isn't showing up for the "Retire" header—there are a few small adjustments we can make to get it working properly.

First, Verify Your Headers Structure #

Make sure your headers array includes the value and tooltip properties correctly. It should look something like this:

// Example headers array in your component's data
headers: [
  { text: 'Name', value: 'name' },
  { text: 'Status', value: 'status' },
  { text: 'Retire', value: 'Retire', tooltip: 'Click to mark the item as retired' },
  // Add other columns here
]

Double-check that the value for the Retire header exactly matches 'Retire' (case-sensitive!) since your condition relies on that.

Option 1: Use a Targeted Header Slot (Cleanest Approach) #

Instead of overriding all headers with a global slot, use Vuetify's targeted header slot for the Retire column. This avoids extra conditionals and keeps your code cleaner:

<v-data-table
  class="zebrastripes"
  :items="autofilterItems"
  :items-per-page="20"
  :footer-props="{
    'items-per-page-options': [5, 10, 20, -1],
  }"
  :headers="headers"
  :search="search"
  :no-results-text="$t('General.noSearchMatch')"
  :custom-sort="dateSorting"
  :loading="trigger_loader"
>
  <!-- Target only the "Retire" header using its value -->
  <template v-slot:header.Retire="props">
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <!-- Bind both `on` (events) and `attrs` (aria attributes) for proper tooltip trigger -->
        <span v-on="on" v-bind="attrs">{{ props.header.text }}</span>
      </template>
      <span>{{ props.header.tooltip }}</span>
    </v-tooltip>
  </template>
  <!-- All other headers will use their default rendering automatically -->
</v-data-table>

Option 2: Fix the Global Header Slot #

If you prefer using the global header slot, adjust the logic to handle both tooltip and non-tooltip headers correctly, and ensure the tooltip activator is properly bound:

<v-data-table
  class="zebrastripes"
  :items="autofilterItems"
  :items-per-page="20"
  :footer-props="{
    'items-per-page-options': [5, 10, 20, -1],
  }"
  :headers="headers"
  :search="search"
  :no-results-text="$t('General.noSearchMatch')"
  :custom-sort="dateSorting"
  :loading="trigger_loader"
>
  <template v-slot:header="props">
    <th>
      <!-- Render tooltip only for Retire header -->
      <template v-if="props.header.value === 'Retire'">
        <v-tooltip bottom>
          <template v-slot:activator="{ on, attrs }">
            <span v-on="on" v-bind="attrs">{{ props.header.text }}</span>
          </template>
          <span>{{ props.header.tooltip }}</span>
        </v-tooltip>
      </template>
      <!-- Render plain text for all other headers -->
      <template v-else>
        {{ props.header.text }}
      </template>
    </th>
  </template>
</v-data-table>

Key Issues in Your Original Code #

1. Missing attrs Binding: Your original activator only used v-on="on", but Vuetify tooltips often require binding attrs too (for accessibility and proper trigger behavior).
2. Unnecessary v-if in Tooltip Content: Once you've already checked that the header is Retire, you don't need an extra v-if on the tooltip text—it's redundant.
3. Tooltip value Binding: Using :value="header.value === 'Retire'" can sometimes cause issues with tooltip visibility toggling. It's better to conditionally render the entire tooltip component instead.

Quick Check for Vuetify Version #

If you're using Vuetify 3, the tooltip syntax is slightly different (uses v-model:open instead of value):

<template v-slot:header.Retire="props">
  <v-tooltip bottom v-model:open="isTooltipOpen">
    <template v-slot:activator="{ props: activatorProps }">
      <span v-bind="activatorProps">{{ props.header.text }}</span>
    </template>
    <span>{{ props.header.tooltip }}</span>
  </v-tooltip>
</template>

Just add isTooltipOpen: false to your component's data if you go this route.

内容的提问来源于stack exchange，提问作者milikko