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?

Indeterminism

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

Inception

thanks, second option is exactly what I was looking for. – Indeterminism

This is great! However, when I try and add to example here: vuetifyjs.com/en/components/data-tables/#crud-actions it raise exception "Unexpected identifier" and I think it refers to the v-slot header syntax. A reference link to how to interpret syntax [`header.${h.value}`] in v-slot:[`header.${h.value}`]="{ header }"would be helpful. Thanks! – Andre

BTW... I am using inside template: `....` so I think I need to escape the backticks or implement alternative? – Andre

What I came up with is escaping the backticks AND the $ - this <template v-for="h in headers" v-slot:[`header.${h.value}`]="{ header }"> becomes <template v-for="h in headers" v-slot:[\`header.\${h.value}\`]="{ header }"> – Andre

Is this supposed to work with Vuetify 3 datatable? because its not working for me. – Xylophone

@Xylophone the answer was for Vuetify 2 – Inception

Do you know how to do this in vuetify 3? – Xylophone

Yes seems the header slot does not work yet with vuetify 3 – Bostick

I take that back @Xylophone vuetifyjs.com/en/components/data-tables/headers/#headers-slot this link seems solid – Bostick

For anyone else looking for Vuetify 3 answer, its here: https://mcmap.net/q/1007595/-how-to-add-tooltip-to-datatable-header-in-vuetify-3 – Xylophone