How to add tooltip to datatable header in vuetify 3?

Question

How can I add I tooltip to Vuetify 3 datatable header without having to re-implement sort functionality?

There was an answer to similar question few years ago but its for Vuetify 2: https://mcmap.net/q/916147/-how-to-add-tooltip-to-datatable-header-in-vuetify

Inveracity

Answer 1

Works the same as in the linked answer, except that the header.${string} slot is called column.${string} now, and the tooltip's activator slot now gets a props value instead of on:

<v-data-table
  :headers="headers" 
  :items="items"
>
  <template
    v-for="h in headers" 
    v-slot:[`column.${h.key}`]="{ column }"
  >
    <v-tooltip>
      <template v-slot:activator="{ props }">
        <span v-bind="props">{{ h.title }}</span>
      </template>
      <span>{{ h.title }}</span>
    </v-tooltip>
  </template>
</v-data-table>

Here it is in a playground

Ligialignaloes

Answer 2

Since version 3.4.0, vuetify changed the name of the slot header back to header.${string} like

v-slot:[`header.${h.key}`]="{ column }"

Took me a will to figure out why the solution is not working in my environment :)

Dowel