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
– Troy Morehouse, Commented Dec 3, 2019 at 15:06

tony19 · Accepted Answer · 2022-07-15 01:19:56Z

1

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://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

edited Jul 15, 2022 at 1:19

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 4, 2019 at 12:48

Simon Thiel

3,3356 gold badges30 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related