Tooltip disappears after disabling and re-enabling BootstrapVue table column-CodePudding

The

When you hover your mouse on the First Name column, the tooltip Tooltip for First name will appear. The checkboxes at the top will cause the corresponding table columns to appear/disappear.

Here's the description of the bug I encounter.

I uncheck First Name checkbox. Column First Name disappears. Now, I recheck the First Name checkbox. Column First Name reappears again. This is fine. However, the tooltip no longer works when I hover my mouse on the First Name column.

Here's the complete code in a single HTML file.

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script> <div id='app'> <b-checkbox :disabled="visibleFields.length == 1 && field.visible" v-for="field in showFields" :key="field.key" v-model="field.visible" inline > {{ field.label }} </b-checkbox> <b-table :items="items" :fields="visibleFields" bordered> </b-table> <b-tooltip target="HeaderFirst" triggers="hover" container="HeaderFirst"> Tooltip for First name<br> </b-tooltip> </div> <script> new Vue({ el: '#app', computed: { visibleFields() { return this.fields.filter(field => field.visible) }, showFields() { return this.fields.filter(field => field.key.includes('first') || field.key.includes('last')) } }, data: dataInit, }) function dataInit() { let init_data = {}; init_data.fields = [ { key: 'id', label: 'ID', visible: true }, { key: 'first', label: 'First Name', visible: true, thAttr: { id: "HeaderFirst" }, }, { key: 'last', label: 'Last Name', visible: true }, { key: 'age', label: 'Age', visible: true }, ]; init_data.items = [ { id: 1, first: 'Mike', last: 'Kristensen', age: 16 }, { id: 2, first: 'Peter', last: 'Madsen', age: 52 }, { id: 3, first: 'Mads', last: 'Mikkelsen', age: 76 }, { id: 4, first: 'Mikkel', last: 'Hansen', age: 34 }, ]; return init_data; } </script>

I am using vue v2.6, BootstrapVue.

CodePudding user response：

The <b-tooltip>'s target must exist in the DOM upon mounting. It does not dynamically attach a new tooltip to newly created elements in the DOM.

The first run of your code shows a tooltip because <b-table> initially contains the #HeaderFirst element. When you uncheck the First Name box, the existing elements in <b-table> are replaced with new elements via the computed property. The elements removed from the DOM include the one that <b-tooltip> initially attached a tooltip to, and no new tooltip is generated after <b-table> was updated.

Solution

One solution is to render <b-tooltip> only when the target element is visible:

Create a computed prop that determines whether the #HeaderFirst field is visible.

Conditionally render <b-tooltip> based on that computed prop.

new Vue({ computed: { 1️⃣ firstNameHeaderVisible() { return this.fields.find(field => field.thAttr?.id === 'HeaderFirst')?.visible } }, ⋮ })

2️⃣ <b-tooltip target="HeaderFirst" v-if="firstNameHeaderVisible">

demo

CodePudding user response：

On disabled elements event hover is not working. You need to wrap element by other e.g. div where you set up tooltip and then it should work well