Bootstrap 4 tooltip stuck using Datatables.net

Question

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.

Hover on one of the title, which shows the tooltip

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

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

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.

Carol Skelly · Accepted Answer · 2018-02-28 14:44:00Z

3

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.

answered Feb 28, 2018 at 14:44

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ranjith Varatharajan Over a year ago

Thanks @ZimSystem. It works perfectly. I used this one which also works

drawCallback": function (settings, json) {                     $('[data-toggle="tooltip"]').tooltip();                     $("[id^='tooltip']").tooltip('hide');                 }

Afif Zafri Over a year ago

Thank @RanjithVaradan, yours is working for me. Also working for bootstrap popovers.

Ashish Ingle · Accepted Answer · 2023-08-14 07:07:43Z

0

For Bootstarp Popovers use

            dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "lengthMenu": [[50, -1], [50, "All"]],
            order: [[1, 'desc']],
            fnDrawCallback: function () {
                $('[data-toggle="popover"]').popover();
                $('[data-toggle="popover"]').popover('hide');
            },
            "language": {
                "emptyTable": "No Records Founds"
            },
            "ordering": false,
            buttons: [
                { extend: 'csv', title: 'Support Portal', className: 'btn-sm' },
                { extend: 'pdf', title: 'Support Portal', className: 'btn-sm' },
                { extend: 'print', className: 'btn-sm' }
            ]
        });```

edited Aug 14, 2023 at 7:07

answered Jul 26, 2023 at 5:32

Ashish Ingle

136 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Bootstrap 4 tooltip stuck using Datatables.net

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related