Bootstrap Tooltip NICHT EINE FUNKTION, wenn Sie jQuery DataTables ist initialisiert

Vielleicht die Antwort ist hier und ich bin einfach nicht sehen, es, so dass jede Hilfe wäre sehr willkommen. Ich habe eine Tabelle, die ich bin laden der jQuery DataTables auf, plus ich benutze Bootstrap, und einige der Spannweiten IN den td ' s haben Bootstrap tooltips. Die tooltips funktionieren, nur durch sich selbst, da habe ich das init-script in die Fußzeile - aber wenn ich die dataTables-basic-init-Skript, plötzlich bekomme ich die Fehlermeldung:

Uncaught TypeError: $(...).tooltip ist nicht eine Funktion

Hier ist, was ich habe:

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'
     });
});

Ich bin laden in den folgenden Bibliotheken:

  • jQuery - 3.2.1
  • Bootstrap - 3.3.7
  • DataTables - 1.10.15
  • Das ist eine alte version von jQuery. Vielleicht war es nicht Hinzugefügt, bis eine neuere version?
  • Lassen Sie mich die Frage anders stellen, aktualisieren, meine version von jQuery NICHT das Problem beheben
InformationsquelleAutor Murphy1976 | 2017-07-06
Schreibe einen Kommentar