[Vuejs]-How to add a tooltip to a single header from a list of headers in Vue?

by

0👍

You can use header.value slot on each header item and apply a condition to show the tooltip only for specific headers.

Here is an example that is working with tooltips. You will see that the tooltip would only be displayed for a header with the title Retire.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-data-table
          :headers="headers"
          :items="autofilterItems"
          :items-per-page="5"
          class="elevation-1"
          :items-per-page="20"
          no-results-text="General.noSearchMatch"
          >
          <template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
          <v-tooltip bottom v-if="header.value == 'Retire'">
            <template v-slot:activator="{ on }">
              <span v-on="on">{{ header.text }}</span>
            </template>
            <span>{{ header.tooltip }}</span>
          </v-tooltip>
          <span v-else>{{ header.text }}</span>
          </template>
        </v-data-table>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data() {
          return {
            headers: [
              {
                text: 'Retire',
                value: 'Retire',
                sortable: false,
                tooltip: 'I am a tooltip'
              },
              {
                text: 'Dessert (100g serving)',
                value: 'name',
                sortable: false,
              },
              {
                text: 'Fat (g)',
                value: 'fat',
                sortable: false,
              },
              {
                text: 'Carbs (g)',
                value: 'carbs',
                sortable: false,
              },
              {
                text: 'Protein (g)',
                value: 'protein',
                sortable: false,
              },
              {
                text: 'Iron (%)',
                value: 'iron',
                sortable: false,
              },
            ],
            autofilterItems: [{
                name: 'Frozen Yogurt',
                Retire: true,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                iron: 1,
              },
              {
                name: 'Ice cream sandwich',
                Retire: true,
                fat: 9.0,
                carbs: 37,
                protein: 4.3,
                iron: 1,
              },
            ],
          }
        },
      })
    </script>
  </body>
</html>

Leave a comment