How to bind a tooltip on table cells with Vue.js

Question

I have a table generated with Vue.js over items.

I bound item.id with html's id and for attributes to display a tooltip with MDL but this one is not showing.

What am I doing wrong ?

<div id="items">
    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
            <tr>
                <th>
                    Status
                </th>
                <th>
                    Name    
                </th>
            </tr>
        </thead>
        <tbody>                
            <tr v-for="item in items">
                <td>
                    <i v-if="item.isActive" class="material-icons" style="color:#4CAF50">power_settings_new</i>
                    <i v-else class="material-icons" style="color:#F44336">power_settings_new</i>
                </td>

                <!-- HERE -->
                <td v-bind:id="item.id">

                    {{ item.shortName }}

                    <!-- v-bind working but tooltip is not showing. -->
                    <div class="mdl-tooltip mdl-tooltip--large" v-bind:for="item.id">
                        {{ item.name }}
                    </div>
                </td>                   
            </tr>
        </tbody>
    </table>
</div>

I also tried to bind on div rather than td, sadly it's not working too.

                <div v-bind:id="item.id">
                    {{ item.shortName }}
                </div>
                <div class="mdl-tooltip mdl-tooltip--large" v-bind:for="item.id">
                    {{ item.name }}
                </div>

please note that in the first row of your HTML you did not use the closing quotes for the div identified as "items". — P3trur0
– P3trur0, Commented Dec 20, 2017 at 8:10
Did you try to bind id to data-mdl-for instead of v-bind:for? I don't understand why, in MDL documentation, the large tooltip is bound to "for" while the small one is bound to "data-mdl-for". — P3trur0
– P3trur0, Commented Dec 20, 2017 at 9:02
I just tried, but it's not working too... Thanks for suggestion — Toodoo
– Toodoo, Commented Dec 20, 2017 at 9:08

Decade Moon · Accepted Answer · 2017-12-20 10:01:09Z

I'm not familiar with the Material Design Lite library, but I'm guessing this probably has to do with the fact that your elements are being generated dynamically by Vue, and the MDL library scans the DOM and configures your components on page load only:

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

MDL and Vue don't play well together; you're going to have to tell MDL about any dynamic DOM changes manually in code, for example:

var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);

See Use MDL on dynamic websites for more information.

This is completely untested, but maybe you can write a Vue directive that will allow you to call updateElement on new DOM elements:

Vue.directive('mdl-element', {
  update(el) {
    componentHandler.upgradeElement(el)
  }
})

<div class="mdl-tooltip mdl-tooltip--large" v-bind:for="item.id" v-mdl-element>

I'm not even sure if upgradeElement can be called multiple times on the same element, and upgradeElement might replace the element entirely with something else which really isn't going to play nice with Vue, but you get the idea.

Collectives™ on Stack Overflow

How to bind a tooltip on table cells with Vue.js

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