[Solved] styling tooltips with an image map

[nataroo37]

qTip is great and I absolutely love it, thank you for creating such a great tool.

I'm having a styling problem. I have a color-coded image map and I have qtip working perfectly. My problem is that I want to have color-coded tooltips on my image map. Right now I can only get one style to work for all of them.

I don't know how to apply separate styles to separate areas of my map.

Please help. I need the syntax, where do I call the new style?

[Craig]

nataroo, could you provide the code your using so I can advise you on the best method please?

[nataroo37]

Yes sure Craig! Thank you for the quick reply.

Here is the j

JS Code

<script class="example" type="text/javascript"> 
// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('area').each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr('alt'), // Use the ALT attribute of the area map
         style: {
            name: 'light', // Give it the preset dark style
            border: {
               width: 0, 
 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         },
        position: {
      corner: {
         target: 'rightMiddle',
         tooltip: 'leftMiddle'
      }
     }
 
      });
   });
});
</script>

Here is the image map (HTML):

JS Code

<img src="images/reform/FudingReform.jpg" alt="" width="551" height="333" border="0" usemap="#reform" class="left" />
  <map name="reform" id="reform">
 
<area shape="rect" coords="4,31,273,91" o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()" alt="lorem ipsum"/>
 
<area shape="rect" coords="4,94,272,150" o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()"  alt="lorem ipsum " />
 
<area shape="rect" coords="4,151,274,209" o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()"  alt="lorem ipsum" />
 
<area shape="rect" coords="4,211,275,273" o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()"  alt="lorem ipsum" />
 
<area shape="rect" coords="4,274,273,335" o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()" alt="lorem ipsum" </strong>" />
</map>

[Craig]

I'd recommend using a custom HTML attribute on your elements to specify the style of the tooltip in this case. For example:

JS Code

<area shape="rect" coords="4,274,273,335" o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()" rel="light" alt="lorem ipsum" />

JS Code

<script class="example" type="text/javascript"> 
// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('area').each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr('alt'), // Use the ALT attribute of the area map
         style: {
            name: $(this).attr('rel'), // Use the elements defined style
            border: {
               width: 0, 
               radius: 4 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         },
         position: {
            corner: {
               target: 'rightMiddle',
               tooltip: 'leftMiddle'
            }
         }
      });
   });
});
</script>

[nataroo37]

This works perfectly. Thank you so much Craig! I really appreciate it, you saved the day!

[MiH]

Is it possible, to use qtip with an image map not only to view "alt" in tooltips, but to buld tooltips like in this demo http://craigsworks.com/projects/qtip/dem...nt/loading ?

[Craig]

MiH, most definitely. You'd just use the content.url option in your configuration and you'd be set.

[MiH]

ok! I won! =)
html

JS Code

<area shape="circle" coords="446,121,23" rel="index.php" href="#" alt='????????????? ??????' />

java

JS Code

<script type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
   // Use the each() method to gain access to each elements attributes
   $('area').each(function()
   {
      $(this).qtip(
      {
         content: {
            url: $(this).attr('rel'), method: 'post',
            title: {
               text: $(this).attr('alt'), // Give the tooltip a title using each elements text
               button: '???????' // Show a close link in the title
            }
},
hide: 'click',
// Use the ALT attribute of the area map
         style: {
            name: 'light', // Give it the preset dark style
            border: {
               width: 0, 
 
               radius: 4,
 
            }, 
            tip: true // Apply a tip at the default tooltip corner
         },
        position: {
      corner: {
         target: 'rightMiddle',
         tooltip: 'leftMiddle'
      }
     }
 
      });
   });
});
</script>

but can't see tips in Opera 9.24 and IE6... don't know why..

[MiH]

fixed!!
trailing comma!!