Search code examples
javascriptjquerycssdatatablesbootstrap-4

Bootstrap 4 tooltip stuck using Datatables.net

Scenario: Load the datatables grid using server side processing. Set the tooltip on the title column. When the mouse hovers the tooltip is shown.

Issue: I got the tooltip working. but found one issue that I couldn't solve.

  1. Hover on one of the title, which shows the tooltip

enter image description here

  1. While keeping the mouse hovered on the title, change the show 10 records to 25 records using keyboard.

enter image description here

  1. After the records are loaded, the tooltip is stuck on the screen.

enter image description here

Here is my code snippet

var table = $('#list-of-product').DataTable({
            "processing": true,
            "serverSide": true,
            "info": true,
            "stateSave": false,
            "bFilter": false,
            "drawCallback": function (settings, json) {
                $('[data-toggle="tooltip"]').tooltip('update');
                //$("#list-of-product tbody tr > td").tooltip('hide');
            },
            "ajax": {
                "url": "@Url.Action("GetProducts", "LandingPage")",
                "type": "POST"
            },
            "language": {
                "paginate": {
                    "previous": "<<",
                    "next": ">>"
                },
                "info": "Showing _START_ to _END_ of _TOTAL_",
                "lengthMenu": "Show _MENU_",
                "search": "",
                "searchPlaceholder": "Search..."
            },
            "columns": [
                            { "data": "LineOfBusiness", "orderable": true },
                            { "data": "Discipline", "orderable": true },
                            { "data": "InventoryProgram", "orderable": true },
                            { "data": "ISBN13", "orderable": true },
                            { "data": "Title", "orderable": true },
                            { "data": "ProductID", "orderable": true },
                            {
                                data: null,
                                className: "text-center",
                                defaultContent: '<a href="#list-of-product" data-toggle="modal" data-target="#ContactAssigner"><i class="material-icons">assignment_ind</i></a>',
                                "orderable": false
                            }
            ],
            "order": [[0, "asc"]],
            createdRow: function (row, data, dataIndex) {
                $(row).find('td:eq(4)').attr('title', data["Title"]);
                $(row).find('td:eq(4)').attr('data-toggle', "tooltip");
                //$(row).find('td:eq(4)').tooltip();
            }
        });

Any advise would be helpful. Thanks.

Solution

  • You need to hook into this page size change event, and then hide any open tooltips.

    $('#list-of-product').on('length.dt', function (e, settings, len) {
    $('[data-toggle="tooltip"]').tooltip('hide');
});

    Demo on Codeply

    The drawCallback event won't work very well because it's called on init and any time the table is updated, when it may not be necessary to hide all the tooltips.