Render custom header in element-ui to show bootstrap tooltip?

Question

I try to render a bootstrap tooltip (https://bootstrap-vue.js.org/docs/components/tooltip/) within a header of an element-ui table.

I use the custom header render method:

<el-table-column
  v-for="(column, index) in headers"
  :render-header="renderHeader"
/>

The following code renders as expected except of the id which is missing. For debugging purposes I added a class which renders as expected:

renderHeader(h, { column }) {
  return h(
    'div',
    {
      id: `tooltip-target__${column.property}`,
      class: 'some-class'
    },
    [
      column.label,
      h(
        'b-tooltip',
        {
          attrs: {
            triggers: 'hover',
            target: `tooltip-target__${column.property}`
          }
        },
        column.label
      )
    ]
  );
},

Is your column.property value unique across all rows of your table? And are you including Bootstrap and BootstrapVue's CSS? — Troy Morehouse

Simon Thiel Simon Thiel · Accepted Answer · 2019-12-04T12:48:20

The id needs to be defined inside the attrs object:

renderHeader(h, { column }) {
  return h(
    'div',
    {
      attrs: {
        id: `tooltip-target__${column.property}`
      }
      class: 'some-class'
    },
    [
      column.label,
      h(
        'b-tooltip',
        {
          attrs: {
            triggers: 'hover',
            target: `tooltip-target__${column.property}`
          }
        },
        column.label
      )
    ]
  );
},

I found a good example in the documentation: https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

Render custom header in element-ui to show bootstrap tooltip?

1 Answers