Why isn't my jQuery tooltip acting like a jQuery tooltip?

Question

I'm working on presenting yet another periodic table, and am running into issues with jQuery UI tooltips. The page ends, without JavaScript errors, at:

<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>

Earlier it was giving no JavaScript errors but a default styled (Chrome yellow on black, small font size) tooltip, unlike the tooltip in the jQuery UI demo at http://jqueryui.com/tooltip/ (both for a td and a td > span). Now it displays the screen contents for a second or so, and then blanks out the display.

What is wrong with http://JonathansCorner.com/periodic/content.html and how can I fix it so it displays the page normally and displays jQuery UI's default tooltip version of a tooltip? The top left corner has a title.

Answer 1

I created this fiddle, with the markup of your page. Please note that the fiddle will actually add the html, head and body tag... and it seems to work fine: fiddle.jshell.net/BBa4t

Answer 2

Instead of your script:

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

Try this script:

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

You are also not specifying a complete HTML document. Where are your HTML, HEAD, BODY, etc. tags? After adding these I would include the jQuery assets in the HEAD section instead of at the bottom of your page.

It looks like you are also including the tooltip javascript twice. In these lines:

<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>

It looks like your jquery-ui.js already contains the tooltip widget so you don't need the second inclusion of jquery.ui.tooltip.js.