Trying to get a tooltipsy example to work

Question

I downloaded tooltipsy.min.js from http://tooltipsy.com/ and put it on the same folder as my html file. This is my code which doesn't work at all. Why? Wrapping the jquery code with $(document).ready()didn't help.

<html>
<head>
<style>
.tooltipsy {
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.slim.min.js"></script>
<script type="text/javascript" src="tooltipsy.min.js"></script>

<script type="text/javascript">
$('.hastip').tooltipsy();
</script>

</head>

<body>
<a class="hastip" title="I am the tooltip text">I want a tooltip</a>
</body>

</html>

my bad. I edited the code. Still same result. Firebug (@Firefox) is telling me there are no javascript errors at all) — Chris, Oct 09 '16 at 14:00

Steve · Accepted Answer · 2016-10-09T14:08:44.997

This seems to work for me:

Had to add the <p> tags to push the body down you you could see the tip.

HTML:

<html>
<head>
<style>
.tooltipsy {
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}
</style>

<script   src="http://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

<script type="text/javascript">
$(document).ready(function () {
    $('.hastip').tooltipsy();
})

</script>

</head>

<body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<a class="hastip" title="Show me">Why don't you work</a>
</body>

</html>

Note: I used the non-slim version of jQuery, because it does not appear that this version of tipsy is playing nicely with the 3.x slim version of jQuery. (Using tipsy with the slim jQuery throws the error Uncaught TypeError: b.bind is not a function in console.)

you're right... it works when I use jquery-3.1.1.min.js. Thanks. — Chris, Oct 09 '16 at 14:08

Trying to get a tooltipsy example to work

1 Answers1