How to add tooltip to datatable header in vuetify?

Question

In older version on vuetify you could access headerCell slot and easily add tooltips - see https://codepen.io/nueko/pen/dZoXeZ

In the latest version you have named slots, so you need to know header name before

<template v-slot:header.givenname="{ header }">

Is there a way to add a tooltip to all headers?

Answer 1

There are 2 ways to achieve this.

Option 1: Customizing whole table row

If you need to customize whole row element inside table heading this might be useful. Even though I would not recommend to follow this way if you don't want to loose sorting functionality which exist by default in v-data-table.

Example:

<template v-slot:header="{ props: { headers } }">
  <thead>
    <tr>
      <th v-for="h in headers">
        <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <span v-on="on">{{h.text}}</span>
        </template>
        <span>{{h.text}}</span>
      </v-tooltip>
      </th>
    </tr>
  </thead>
</template>

Working pen: https://codepen.io/onelly/pen/QWWmpZN

Option 2: Customizing each heading without losing sorting functionality

I guess this is more like what you are trying to do and the replacement for the old way. You can loop <template v-slot:header> and use Dynamic Slot Names to accomplish this. Syntax for Dynamic slot name looks like this <template v-slot:[dynamicSlotName]>.

Example:

<template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }">
  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <span v-on="on">{{h.text}}</span>
    </template>
    <span>{{h.text}}</span>
  </v-tooltip>
</template>

Working pen: https://codepen.io/onelly/pen/ExxEmWd