[Solved] qTip image map multiple triggers for one tip

[nico]

I have an image map that I am using qTip with. It works great, so thanks for the awesome plugin. I have it set up so there are dots on the map that act as triggers to the qTips.

I want to have a legend beside the map, and the items in the legend also act as triggers to the qTips that are on the map.

Since the map has about 50 qTips, I'm using the each() method.

How can I make multiple triggers for one tip, without hard-coding each tip?

Thanks!

JS Code

$('area.blue').each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr('alt'), // Use the ALT attribute of the area map
         style: {
			background: '#FFF',
      		textAlign: 'center',
        	color: '#78716E',
            name: 'dark', // Give it the preset dark style
            border: {
               width: 6,
			   color: '#27aae1',
               radius: 0 
            }, 
            tip: 
				true,// Apply a tip at the default tooltip corner
				size: { x:20, y: 8},
 
         },
        position: {
			corner: {
				target: 'topMiddle',
				tooltip: 'bottomLeft'
		  	},
			adjust: {
				screen: true
			}
     	},
		show: {
			delay: 0,
			effect: {
				type: 'fade',
				//length: 1000
			},
		}
 
      });
 
   });

[Craig]

Multiple triggers as in multiple targets that will open the tooltips? That's possible, but I'd suggest using using qTip2 for it instead as it has native support for it built in

[nico]

(1st August 15:12)Craig Wrote:  Multiple triggers as in multiple targets that will open the tooltips? That's possible, but I'd suggest using using qTip2 for it instead as it has native support for it built in

Thanks for the reply. I've installed qTip2, and looked through the documentation, but I don't see anything about what I am looking to accomplish (not one tooltip, multiple targets).

I have an image map with dots on it. When you hover a dot, the qTip shows. That's working great. What I want to do is also have the text in the legend make the associated qTip appear on the map. For example, dot 1 on the map makes the qTip show beside it, and item 1 in the legend also makes dot 1's qTip show on the map.

Any pointers you can provide would be great. Thanks!

[Craig]

Assuming the <area> elements on your map are in the same order as those elements you want to also trigger the qtip:

JS Code

$('.legend a').hover(function(event) {
	var i = $(this).index(); // It's index in relation to it's siblings
 
	// If we moused onto it, show the tooltip, otherwise hide it
	$('.imagemap area').eq(i).qtip('toggle', event.type === 'mouseenter');
});

Or you could even do it by declaring multiple show/hide targets for each qTip (assuming again the dots are in the same order as the legends that trigger them)

JS Code

$('.imagemap area').each(function() {
	var self = $(this),
		index = $(this).index(),
		targets = self.add( $('.legend a').eq(i) );
 
	$(this).qtip({
		content: 'blah',
		show: {
			target: targets
		},
		hide: {
			target: targets
		}
	});
});

[nico]

(2nd August 10:41)Craig Wrote:  Assuming the <area> elements on your map are in the same order as those elements you want to also trigger the qtip:

JS Code

$('.legend a').hover(function(event) {
	var i = $(this).index(); // It's index in relation to it's siblings
 
	// If we moused onto it, show the tooltip, otherwise hide it
	$('.imagemap area').eq(i).qtip('toggle', event.type === 'mouseenter');
});

Or you could even do it by declaring multiple show/hide targets for each qTip (assuming again the dots are in the same order as the legends that trigger them)

JS Code

$('.imagemap area').each(function() {
	var self = $(this),
		index = $(this).index(),
		targets = self.add( $('.legend a').eq(i) );
 
	$(this).qtip({
		content: 'blah',
		show: {
			target: targets
		},
		hide: {
			target: targets
		}
	});
});

Perfect! Thanks so much