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?
Advertisement
Answer
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