I have a bootstrap-vue table that looks like this;

Here's the code for the table;

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

This is what I want to do. When user moves his mouse to First Name column name cell, I want to show a tooltip that says "Click to sort First Name".

I am using vue v2.6

CodePudding user response：

With the help of b-tooltip component of bootstrap-vue you can do that like the code below:

<template>
  <div>
    <b-table striped hover :items="items" :fields="fields"></b-table>
    <!-- using "b-tooltip" component that targets the defined "id" in the fields of "b-table" -->
    <b-tooltip target="myHeader" triggers="hover" container="myHeader">
      Click to sort First Name
    </b-tooltip>
  </div>
</template>

<script>
export default {
  name: "CompoTable",
  data() {
    return {
      // Note 'isActive' is left out and will not appear in the rendered table
      fields: [
        {
          key: 'last_name',
          sortable: true
        },
        {
          key: 'first_name',
          /* ------------------------------ */
          /* I changed sortable to "true" to make sorting */
          /* ------------------------------ */
          sortable: true,
          /* ------------------------------ */
          /* add this to add "id" to "th" tag related to "first name" */
          /* ------------------------------ */
          thAttr: {
            id: "myHeader"
          }
        },
        {
          key: 'age',
          label: 'Person age',
          sortable: true,
          // Variant applies to the whole column, including the header and footer
          variant: 'danger'
        }
      ],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
}
</script>

Also you need thAttr field property to add "id" to the first-name column in your table definition.