Bootstrap Tooltip doesn't work on previously hidden columns of DataTable

Question

I have a DataTable on which each cell has a Bootstrap Tooltip. Some of the columns are initially hidden and can be made visible by the user as per the Column Visibility option of DataTables. The now visible columns contain the HTML required for the tooltips, however the Bootstrap Tooltips do not show up on them and instead the regular standard tooltips show up.

What causes this and how could I fix this?

An example of my issue can be seen here:

$(document).ready(function() {
    if ($('.dataTable').length > 0) {



        $('.dataTable').DataTable({
            lengthMenu: [[5, 10, 25, 50, 75, 100, -1], [5, 10, 25, 50, 75, 100, "ALLE"]],
            pageLength: 10,
            dom: 'Blfrtip',
            buttons: [
                'colvis'
            ],
            columnDefs: [
                {
                    targets: "hidden",
                    visible: false
                }
            ]
        });
    }

    $('[data-toggle="tooltip"]').tooltip()
} );

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script>

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/libs/datatables/latest/media/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">


    <table class="table table-hover table-striped table-bordered dataTable">
        <thead>
            <tr>
                <th>Visible 1</th>
                <th>Visible 2</th>
                <th>Visible 3</th>
                <th class="hidden">Hidden 1</th>
                <th class="hidden">Hidden 2</th>
                <th class="hidden">Hidden 3</th>
            </tr>
        </thead>

        <tbody>
            <tr onclick="auftragModal({{ auftrag|json_encode }})">
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V1</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 2">V2</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V3</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 1">H1</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 2">H2</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden3">H3</td>
          </tr>
          <tr onclick="auftragModal({{ auftrag|json_encode }})">
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V1</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 2">V2</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V3</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 1">H1</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 2">H2</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden3">H3</td>
          </tr>
          <tr onclick="auftragModal({{ auftrag|json_encode }})">
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V1</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 2">V2</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V3</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 1">H1</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 2">H2</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden3">H3</td>
          </tr>
        </tbody>
    </table>

https://jsfiddle.net/hu3fLr2e/4/

Answer 1

While I'm not sure what caused the issue, I fixed it by also calling $('[data-toggle="tooltip"]').tooltip() on the column-visibility.dt event. New example below should work.

$(document).ready(function() {
    if ($('.dataTable').length > 0) {



        var table = $('.dataTable').DataTable({
            lengthMenu: [[5, 10, 25, 50, 75, 100, -1], [5, 10, 25, 50, 75, 100, "ALLE"]],
            pageLength: 10,
            dom: 'Blfrtip',
            buttons: [
                'colvis'
            ],
            columnDefs: [
                {
                    targets: "hidden",
                    visible: false
                }
            ]
        });
    }

    table.on( 'column-visibility.dt', function () {
        $('[data-toggle="tooltip"]').tooltip()
    } );
    $('[data-toggle="tooltip"]').tooltip()
} );

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.colVis.min.js"></script>

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/libs/datatables/latest/media/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">


    <table class="table table-hover table-striped table-bordered dataTable">
        <thead>
            <tr>
                <th>Visible 1</th>
                <th>Visible 2</th>
                <th>Visible 3</th>
                <th class="hidden">Hidden 1</th>
                <th class="hidden">Hidden 2</th>
                <th class="hidden">Hidden 3</th>
            </tr>
        </thead>

        <tbody>
            <tr onclick="auftragModal({{ auftrag|json_encode }})">
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V1</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 2">V2</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V3</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 1">H1</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 2">H2</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden3">H3</td>
          </tr>
          <tr onclick="auftragModal({{ auftrag|json_encode }})">
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V1</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 2">V2</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V3</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 1">H1</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 2">H2</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden3">H3</td>
          </tr>
          <tr onclick="auftragModal({{ auftrag|json_encode }})">
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V1</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 2">V2</td>
              <td data-toggle="tooltip" data-placement="top" title="Visible 3">V3</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 1">H1</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden 2">H2</td>
              <td data-toggle="tooltip" data-placement="top" title="Hidden3">H3</td>
          </tr>
        </tbody>
    </table>