Tippy tooltip not working in server side datatable render function

I am creating an index on posts using Blade and I am having a problem in my code: tippy tooltip is not working on render function of datatable serve-side.

I am not getting any errors; every time I hover over the column where the tooltip is defined (description (body) column) I cannot see it.

Where am I going wrong?

FILE BLADE:

<x-layout>
    <h3>List posts</h3>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
              <th>ID</th>
              <th>TITLE</th>
              <th>DESCRIPTION</th>
              <th>PUBLISH</th>
            </tr>
        </thead>
    </table>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
        new DataTable('#example', {
            ajax: "{{ route('retrieveposts') }}",
            processing: true,
            serverSide: true,
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'title',
                    name: 'title',
                    render: function(data, type, row) {
                        return `
                            <strong id="title_${row.id}" class="title"> ${data} </strong>                    
                        `;
                    }
                },
                {
                    data: 'body',
                    name: 'body',
                    render: function(data, type, row) {
                        return `
                        <div data-tippy-content="Tooltip">
                            <span id="value_description_${row.id}"> ${data}</span>
                         </div>
                         `;
                    }
                },
                {
                    data: 'is_publish',
                    name: 'is_publish',
                    render: function(data, type, row) {
                        return `
                        <span> ${data} </span>                         
                        `;
                    }
                },
            ]
        });
        
        tippy('[data-tippy-content]')

    </script>

</x-layout>

You need to sign in to view this answers

Related Post