ImageMap with alt

[mdeltito]

Hey,
Excellent plugin!

Question: How would I specify which property the content of the tooltips would come from?

I had the image map tooltip working with title, but I needed to switch to alt to make IE happy. Any ideas?

[Craig]

medltito,

Upgrade to the latest branch release, it checks both title and alt attributes for content: http://bazaar.launchpad.net/~craig.craig...runk/files

[mdeltito]

craig Wrote:medltito,

Upgrade to the latest branch release, it checks both title and alt attributes for content: http://bazaar.launchpad.net/~craig.craig...runk/files

Sorry for the late reply.

On a related note, are you aware of any way to suppress the tooltip generated by IE6+7? It seems that even with the tooltip data in the alt attribute AND a blank title attribute, IE6+7 like to display the browser tooltip anyway. What results is an ugly combination of qTip and IE's built in tooltip.

[Craig]

Just make sure to remove the attributes after the qTip call:

JS Code

$('.selector').qtip({}).removeAttr('title').removeAttr('alt')

[nataroo37]

I am having this exact same problem. I have an image map and in IE, the default IE alt as well as the qTip shows up. Craig's solution looks wonderful but I'm not sure where to put the code provided. I'm very new to javascript and jQuerty.

Here is my code, where do I put Craig's code?

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>

[nataroo37]

I actually found the solution to my question. This works great!

JS Code

o<strong></strong>nmouseover="this.alt='';showtip('my tooltip')" o<strong></strong>nmouseout="hidetip()"