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>