当用户将鼠标移动到 bootstrap-vue table 的列名称时显示工具提示

Question

我有一个 bootstrap-vue table 看起来像这样；

这是 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>

这就是我想做的。当用户将鼠标移动到 First Name 列名称单元格时，我想显示一个工具提示，上面写着“单击以对名字进行排序”。

我正在使用 vue v2.6

Answer 1

借助 bootstrap-vue 的 b-tooltip 组件，您可以像下面的代码那样做：

<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>

您还需要 thAttr 字段属性将 "id" 添加到 first-name 列在您的 table 定义中。

当用户将鼠标移动到 bootstrap-vue table 的列名称时显示工具提示

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

javascript

tooltip

vue.js

bootstrap-vue