Tooltips?

[CLCWebsiteServices]

How is it possible to show tooltips from within the SetupListOperation? I've tried the following:

$this->crud->addColumn([
    'label' => 'Custom Image',
    'type' => 'custom_html',
    'name' => 'image',
    'value' => function ($entity) {
        return '<a class="btn-link" href="#" data-toggle="tooltip" title="My Tooltip">This should have a tooltip</a>';
    }
]);

I've even tried adding a 'js/admin/custom.js' inside my ui.php config, and the contents of that file looks like this:

function initializeTooltips() {
    if (typeof $.fn.tooltip !== 'undefined') {
        // Bootstrap is loaded, so initialize tooltips
        $('[data-toggle="tooltip"]').tooltip();
    } else {
        // If Bootstrap is not yet loaded, wait and check again in a moment
        setTimeout(initializeTooltips, 100);
    }
}

$(document).ready(initializeTooltips);

Yet, none of these seem to be working? but if I open my console on Chrome & C+P the code, it works?

[pxpm]

Hey @CLCWebsiteServices

The main issue with your code is that the table columns are not in the page at the moment the page is initialized. They are fetched with ajax and only after that, displayed in table.
By that time your initializeTooltips had already run and wouldn't produce any results like you said.
In that regard you need to listen to Datatables Plugin draw event.

To globally add tooltips to your application you can do the following:

1 - Create a file, say enabled_tooltips.js and put it inside public/assets/js/enabled_tooltips.js.
2 - Add the following code (Bootstrap 5) in that file:

document.addEventListener("DOMContentLoaded", function(event) {
    if(document.body.contains(document.getElementById('crudTable'))) {
        $('#crudTable').on("draw.dt", function(e) {
            initTooltipsOnPage();
        });
    }
    initTooltipsOnPage();
});

function initTooltipsOnPage() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
}

3 - Tell Backpack to load that file on every page by going to config/backpack/ui.php and add the file in the scripts section:

// ... rest of the file
'scripts' => [
    'assets/js/enabled_tooltips.js'
], 
// ... rest of the file

Any element you want a tooltip, for example in a text column, you can just do:

CRUD::column('test')->wrapper(['data-bs-toggle' => 'tooltip', 'title' => 'your tooltip text']);

Hope that helps.

Cheers