qTip not working when hovering over image

Question

I'm creating a Type 101 page and I'm trying to create an interactive section for the anatomy of letterforms. Here's a link so you can get an idea of what I'm talking about: http://willryan.us/test/#anatomyBox

I plan on having it where you hover over different parts of the image and a qTip pops up with a definition of the part you're looking at. For some reason, I can't even get the qTip to show. I've tried everything I could think of but it's still not working.

Here's what I have:

HTML

    <div id="anatomyBox">
            <div id="anatomy">
                <h1>ANATOMY</h1>
                <h2>You're saying a letter has different parts?!</h2>
                <p>Type Fun01 was created to Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus ante vitae orci dapibus sollicitudin. Nam pretium volutpat blandit. Sed tristique nunc ut justo gravida sollicitudin.</p>

                <p>Nulla facilisi. Duis sit amet libero a massa aliquet auctor vitae eget quam. Donec est magna, porttitor id porta eget, porttitor a ante. Nam felis dolor, aliquet vel vulputate vitae, lacinia sed leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at diam in nisi varius tincidunt.</p>

                <p>What is typography? We've known each other for so long Your heart's been aching but you're too shy to say it Inside we both know what's been going on We know the game and we're gonna play it And if you ask me how I'm feeling Don't tell me you're too blind to see</p>
            </div>

            <div id="anatomyMap1">
                <img src="assets/images/anatomy_1.png" width="804" height="114" alt="Clarendon">
            </div>

JS (in head tag)

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 <!-- add q-tip-->
<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script> 

<script type="text/javascript">
    $(document).ready(function() 
        { 
           $('#anatomy img').qtip({
           content: 'This is an image',
           show: 'mouseover',
           hide: 'mouseout'
        });
    });
</script>

What am I doing wrong?! It seems like super simple javascript but it's not working. And I'm obviously not quite there yet, but what's the best way to hover over different sections of one image and see different tooltips? I was looking into image maps and it seems like that could work... One step at a time I guess.

Answer 1

You have an error in the plugin...

"Uncaught TypeError: Cannot read property 'msie' of undefined"

This line of code is causing the error...

if($.browser.msie) self.elements.tooltip.get(0).style.removeAttribute('filter');

It's meant to be for IE7, so wouldnt be a big deal if you removed it.

Also the image is not within #anatomy

Should be #anatomyMap1 img

I've commented out the old IE stuff and it works fine.

http://jsfiddle.net/9PEVn/

You might want to look at Qtip2 at a later stage

http://craigsworks.com/projects/qtip2/