Warum funktioniert mein jQuery-Tooltip nicht wie ein jQuery-Tooltip? - jquery, jquery-ui, jquery-ui-tooltip

Ich arbeite daran, ein weiteres Periodensystem zu präsentieren, und stoße auf Probleme mit den Tooltips der jQuery-Benutzeroberfläche. Die Seite endet ohne JavaScript-Fehler unter:

<script src="/js/vendor/jquery-1.8.2.min.js"></script>
<script src="/js/jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<script src="/js/jquery-ui-1.10.2/ui/jquery.ui.tooltip.js"></script>
<script>
jQuery(document).tooltip();
</script>

Früher gab es keine JavaScript-Fehler, sondern einen Standard-Tooltip (Chrome-Gelb auf Schwarz, kleine Schriftgröße), anders als der Tooltip in der jQuery-UI-Demo unter http://jqueryui.com/tooltip/ (sowohl für eine td als auch für eine td> Spanne). Jetzt wird der Bildschirminhalt für etwa eine Sekunde angezeigt, und dann wird die Anzeige ausgeblendet.

Was ist falsch mit http://JonathansCorner.com/periodic/content.html Wie kann ich das Problem so beheben, dass die Seite normal angezeigt wird und die Standard-Tooltip-Version einer QuickInfo-Benutzeroberfläche von jQuery angezeigt wird? Die obere linke Ecke hat einen Titel.

Antworten:

Ich habe diese Geige mit dem Markup Ihrer Seite erstellt. Bitte beachten Sie, dass die Geige tatsächlich die HTML-, Kopf- und Körpermarke hinzufügen wird ... und es scheint gut zu funktionieren: fiddle.jshell.net/BBa4t

Anstelle Ihres Skripts:

<script>
jQuery(document).tooltip();
</script>

Versuchen Sie dieses Skript:

<script>
$(function() {
$(document).tooltip();
});
</script>

Sie geben auch keine vollständige Angabe an HTML dokumentieren. Wo bist du HTML, HEAD, BODYusw. Tags? Nachdem ich diese hinzugefügt habe, würde ich die jQuery-Assets in die HEAD Abschnitt statt am unteren Rand Ihrer Seite.

Es sieht so aus, als würden Sie das Tooltip-Javascript zweimal einschließen. In diesen Zeilen:

<script src="/js/jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<script src="/js/jquery-ui-1.10.2/ui/jquery.ui.tooltip.js"></script>

Es sieht wie dein aus jquery-ui.js enthält bereits das Tooltip-Widget, sodass Sie keine zweite Aufnahme von benötigen jquery.ui.tooltip.js.