How to make custom JavaScript work with Backpack's List Operation

Last month, we received a query on our backpack community forum. A user wanted to add custom JS, to show the tooltips for table section...

Last month, we received a query on our backpack community forum. A user wanted to add custom JS, to show the tooltips for table section of the SetupListOperation and the user hasn't had success. You might face a similar challenge, so let's explore a solution to this challenge.

How to add scripts to Backpack pages

Adding custom JS is easy. It takes only one line: add the js path to config/backpack/ui.php, in the scripts section. Done!

'scripts' => [
    'assets/js/your_custom_script.js'
],

But this didn't work for him! Read below to find out why.

How to make scripts work inside List operation

The script was added on page, but it seemed to do nothing!

The Problem

In the List operation, the table columns are fetched asynchronously using AJAX. That means the tooltip initialization code runs before these columns are added to the page.

The Solution

To solve this problem, we need to listen for the DataTables Plugin draw event, which is triggered each time the table is redrawn. We have to create a separate JavaScript file to handle tooltips and ensure it runs after the table has been drawn.

Example

Let's go through their exact need, to add tooltips to List operation columns, as an example:

Step 1: Create a JavaScript File

Create a file named enable_tooltips.js in the public/assets/js/ directory of your Laravel project.

Step 2: Add Tooltip Initialization Code

Inside enable_tooltips.js, add the following Bootstrap 5-compatible JavaScript code:

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)

    });

}

This code listens for the draw.dt datatables event on the table with the ID crudTable and initializes tooltips after each draw. Additionally, it runs initTooltipsOnPage on the initial page load.

Step 3: Configure Backpack to Load the JavaScript File

Open the config/backpack/ui.php file and add enable_tooltips.js file path in the scripts section:

// ... rest of the file

'scripts' => [

    'assets/js/enable_tooltips.js'

], 

// ... rest of the file

This ensures to load JS on every page of the admin panel.

Step 4: Implement Tooltips in Columns

Now, you can easily add tooltips to any element within your Backpack list view. For example, if you want a tooltip on a text column, you can use the following code in your SetupListOperation:

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

This will add a tooltip to the specified column.

Conclusion

I hope this tutorial will help you fulfill similar needs and make them work with backpack.. By following above steps☝️, you should be able to successfully add tooltips within the SetupListOperation.

Thanks for reading, Happy coding!