Bootstrap 5 tooltips stay on screen when datatable reloads

Brecht2727

Hi,

The tooltip is shown when you hover over it.
The code has been added to the drawCallback function so that it is displayed after every reload.
I have an ajax reload every 10 seconds.
But if you hover over the tooltip during a reload, the tooltip will stay there and won't go away. How come?

    new DataTable('#myTable', {
      drawCallback: function () {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl);
        });      
      },
      footerCallback: function (row, data, start, end, display) {
        let api = this.api();

        // Remove the formatting to get integer data for summation
        let intVal = function (i) {
          return typeof i === 'string'
            ? i.replace(/[\$,]/g, '') * 1
            : typeof i === 'number'
            ? i
            : 0;
        };

        // Total over all pages
        total = api
            .column(9)
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);

        // Total over this page
        pageTotal = api
            .column(9, { page: 'current' })
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);

        // Update footer
        api.column(1).footer().innerHTML = 'Totaal voor deze pagina: ' + pageTotal + ' € ('+ total + ' € algemeen totaal)';
      },      
      language: {
        url: '//cdn.datatables.net/plug-ins/1.10.22/i18n/Dutch.json'
      },
      dom: '<"top"<"left-col"B><"center-col"r><"right-col"f>>t<"bottom"lip>',
      processing: true,
      serverSide: true,
      serverMethod: 'post',
      ajax: {
        url: 'ajax/get-table-data.php',
        data: function(data){
          data.searchByTimeslot = localStorage.getItem("kiwanis_search_timeslot");
        }
      },
      rowId: 'id',
      columns: [
        { data: 'id' },
        { className: 'dt-control',
          orderable: false,
          data: null,
          defaultContent: ''
        },        
        { data: 'fullname' },
        { data: 'email' },
        { data: 'phone' },
        { data: 'kids' },
        { data: 'adults' },
        { data: 'drinks' },
        { data: 'deserts' },
        { data: 'price', render: DataTable.render.number( null, null, 2, null, ' €' ) }, //DataTable.render.number(thousands, decimal, precision, prefix, postfix)
        { data: 'timeslot' },
        { data: 'created' },
        { 
          "targets": [12],
          "orderable": false,
          "class": 'text-center',
          "render": function ( data, type, row ) {

            if(row.remarks) {
              var a = row.remarks2;
            } else {
              var a = '';
            }
            
            return a;

          }         
        }        
      ],
      columnDefs: [
        { 
          "targets": [0],
          "visible": false
        },
        { 
          "targets": [4,5,6,7,8,9,10,11],
          "class": 'text-center',
          "orderable": false
        },
        { 
          "targets": [0,1,2,3],
          "orderable": false
        }
      ],    
      order: [[0, "desc"]],     
    });

kthorngren

Its likely due to Bootstrap not knowing the HTML has changed. Possibly you will need to hide the tooltip before initializing again with drawCallback, as discussed in this SO thread. Use the same selector used to initialize the tooltips. Or you may need to use another Bootstrap 5 technique for closing the tooltips. Maybe do this before using ajax.reload() instead of in drawCallback. If you want help with this please build a simple test case showing what you have.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Brecht2727

Hi Kevin,

I changed my drawCallback function to this:

    drawCallback: function () {

      let tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
      let tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {
        boundary: document.body,
        container: 'body',
        trigger: 'hover'
      }));

      tooltipList.forEach((tooltip) => { $('.tooltip').hide(); });

    }

Now it working fine. Thanks for pointing me in the right direction!