Bootstrap Tooltip NOT A FUNCTION when jQuery DataTables is initialized

Question

Maybe the answer's here and I'm just not seeing it, so any assistance would be most welcome. I have a table, that I'm loading jQuery DataTables onto, plus I'm using Bootstrap, and some of the spans IN the td's have Bootstrap tooltips. The tooltips work fine, just by themselves, since I have the init script in the footer - but when I add the dataTables basic init script, suddenly I get the error:

Uncaught TypeError: $(...).tooltip is not a function

Here's what I have:

HTML5

<table id="resources" class="hover" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Type</th>
                <th>Title</th>
                <th>Thumbnail</th>
                <th>Instrument</th>
                <th>Share</th>
                <th>Resources</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Type</th>
                <th>Title</th>
                <th>Thumbnail</th>
                <th>Instrument</th>
                <th>Share</th>
                <th>Resources</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Video</td>
                <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal">Title of Video</a></td>
                <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal"><img src="thumbnail.jpg" alt="Title of Video" class="img-responsive img-resource"></a></td>
                <td>Insutrment</td>
                <td><a class="btn btn-default btn-xs" data-toggle="modal" data-target="#shareModal">Share <i class="fa fa-share-alt" aria-hidden="true"></i></a></td>
                <td><span class="fa-stack fa-1x" data-toggle="tooltip" data-placement="top" title="Video Resource"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-video-camera fa-stack-1x fa-inverse"></i></span></td>
            </tr>
     </tbody>
</table>

JS

$(document).ready(function(){
     $("#resources").DataTable();
     $('[data-toggle="tooltip"]').tooltip({
          container : 'body'
     });
});

I'm loading in the following libraries:

jQuery - 3.2.1
Bootstrap - 3.3.7
DataTables - 1.10.15

That's an ancient version of jQuery. Maybe it wasn't added until a newer version? — Matt
– Matt, Commented Jul 6, 2017 at 16:11
Let me change the question, updating my version of jQuery did NOT resolve the issue — Murphy1976
– Murphy1976, Commented Jul 6, 2017 at 16:11
Just had the same problem, turned out I was including JQuery twice - once manually and then again in the datatables cdn — John M
– John M, Commented Apr 9, 2020 at 8:33

Matt · Accepted Answer · 2017-07-06 18:04:08Z

1

Seems to be working.

$(document).ready(function() {
  $("#resources").DataTable();
  $('[data-toggle="tooltip"]').tooltip();
});

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>



<table id="resources" class="hover" cellspacing="0" width="100%">
  <thead>
    <tr title="Tooltip Test">
      <th>Type</th>
      <th>Title</th>
      <th>Thumbnail</th>
      <th>Instrument</th>
      <th>Share</th>
      <th>Resources</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Type</th>
      <th>Title</th>
      <th>Thumbnail</th>
      <th>Instrument</th>
      <th>Share</th>
      <th>Resources</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Video</td>
      <td><a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal">Title of Video</a></td>
      <td>
        <a href="#" class="resource-link" data-toggle="modal" data-target="#videoModal"><img src="thumbnail.jpg" alt="Title of Video" class="img-responsive img-resource"></a>
      </td>
      <td>Insutrment</td>
      <td><a class="btn btn-default btn-xs" data-toggle="modal" data-target="#shareModal">Share <i class="fa fa-share-alt" aria-hidden="true"></i></a></td>
      <td><span class="fa-stack fa-1x" data-toggle="tooltip" data-placement="top" title="Video Resource"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-video-camera fa-stack-1x fa-inverse"></i></span></td>
    </tr>
  </tbody>
</table>

edited Jul 6, 2017 at 18:04

answered Jul 6, 2017 at 16:13

Matt

5,4281 gold badge34 silver badges59 bronze badges

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

3 Comments

Murphy1976 Over a year ago

I am using Bootstrap's tooltip, not Jquery-UI. I'm not even loading in jquery-ui to the page.

Matt Over a year ago

Run my updated snippet after bringing in all your resources. Seems to work.

Murphy1976 Over a year ago

huh... I must have had something in the wrong order, I just reordered by CSS and JS library link codes, and now it works fine.

Collectives™ on Stack Overflow

Bootstrap Tooltip NOT A FUNCTION when jQuery DataTables is initialized

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related