Show tooltip when user moves mouse on column name of bootstrap-vue table

Question

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

hamid-davodi · Accepted Answer · 2022-03-05 15:51:51Z

1

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.

answered Mar 5, 2022 at 15:51

hamid-davodi

2,0044 gold badges15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3848207 Over a year ago

Thanks. I'll study your answer. When I run the code snippet, I got error "{ "message": "SyntaxError: export declarations may only appear at top level of a module", "filename": "stacksnippets.net/js", "lineno": 21, "colno": 0 }"

user3848207 Over a year ago

Thanks. Upvoted and marked as correct answer. I have verified your answer to be correct. I don't know why there's an error when I run the code snippet but the answer is correct.

hamid-davodi Over a year ago

I'm not sure, try to remove the name of component to see that the error disappears or not. It does not give me any error in my local development environment.

user3848207 Over a year ago

Never mind. Your answer works anyway.

tony19 Over a year ago

StackOverflow code snippets don't process Vue SFCs, so it can't be run here.

Collectives™ on Stack Overflow

Show tooltip when user moves mouse on column name of bootstrap-vue table

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related