CODEWITHSUNDEEP
javascriptjqueryqtip2
DBroncos1558
DBroncos1558

Reputation: 141

Image map with Qtip2 not working

I have an image map using Qtip, and I want the tooltip to show up on both the left eye and the right eye, but the tooltip is not showing up.

Here is my JS code:

$(document).ready(function() 
{
  $('area[alt]').qtip(
  {
     content: {
          attr: 'alt'
     },
     hide: {
          fixed: true,
          delay: 500
     },
     style: {
      classes: 'qtip-tipsy qtip-shadow'
     },
     position: {
      viewport: $(window)
     }
  });
});

Here is the HTML:

<map name="Koala">
<area alt="Left Eye" shape="rect" coords="373,365,404,402" href="#" />
<area alt="Right Eye" shape="rect" coords="641,405,681,448" href="#" />
<!-- .... more hotspots would be listed here -->
</map>

When I try this code the Qtip does not show up at all and I can not figure out why, any help would be greatly appreciated!

Upvotes: 1

Views: 2488

Answers (1)

Mark
Mark

Reputation: 3123

Take the demo fiddle that was provided in the qtip page http://jsfiddle.net/craga89/v2WPz/

and then modify yours to reflect the changes you want and it should be working.

Here is the final version:

jsfiddle.net/v2WPz/775

<div id="demo-imagemap">
    <h3>United States of America</h3>

    <img border="0" usemap="#statesMap" alt="USA" src="http://www.wallpaperpimper.com/wallpaper/Animal/Koalas/Koala-Bear-Australia-1-1024x768.jpg">
    <map id="statesMap" name="statesMap">
<area alt="Left Eye" shape="rect" coords="373,365,404,402" href="#" />
<area alt="Right Eye" shape="rect" coords="641,405,681,448" href="#" />
    </map>

    <p class="attribution">
        imagemap courtesy of <a href="http://www.americanbanker.com/state/state.html">American Banker</a>
    </p>
</div>

Javascript:

// Create the tooltips only when document ready
$(document).ready(function()
{
    // We'll target all AREA elements with alt tags (Don't target the map element!!!)
    $('area[alt]').qtip(
    {
        content: {
            attr: 'alt' // Use the ALT attribute of the area map for the content
        },
        style: {
            classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
        }
    });
});

Upvotes: 1

Related Questions