[Solved] Tool tip action is unexpected on display

[ktilcu]

http://jsfiddle.net/fDavN/1427/

There is a fiddle for it but it shows up best on my test site:

http://www.6eight6.com/TEST/Alert/map.html

It does not work on the initial hover in the image map, but once you hover for a second time it is ok. Additionally it seems as though the qtip is generating under my mouse so it then goes away immediately. It may have to do with me trying to flip it on the boundaries. I may have missed a positioning option somewhere but i'm not sure.

Thanks in advance.

[Craig]

Got a few options in there at are redundant, see the updated fiddle: http://jsfiddle.net/fDavN/1431/ . Seems to work fine when disabling the positioning effect and setting hide.fixed to true (this prevents it hiding when mousing over the tooltip)

[ktilcu]

(21st August 18:16)Craig Wrote:  Got a few options in there at are redundant, see the updated fiddle: http://jsfiddle.net/fDavN/1431/ . Seems to work fine when disabling the positioning effect and setting hide.fixed to true (this prevents it hiding when mousing over the tooltip)

Is there a way to change the target position after viewport flipping. Right now once the flip occurs the tip stays on the target at the same place.so if i am currently at

my: ' bottom center'
target: 'top center'

And the qtip has to flip vertically it changes to

my: 'top center'
target: 'top center'

and covers the link from which it was called.

[Craig]

Normally yes, but because of the way the imagemap plugin works not in this case... it's actually a good catch since I never thought about this discrepancy...

Check-out the fiddle example again that includes the latest commit, as I've added some extra code to take this into account in the imagemap plugin. It's not perfect, but should work 80% of the time and flip it correctly.

[ktilcu]

(22nd August 00:10)Craig Wrote:  Normally yes, but because of the way the imagemap plugin works not in this case... it's actually a good catch since I never thought about this discrepancy...

Check-out the fiddle example again that includes the latest commit, as I've added some extra code to take this into account in the imagemap plugin. It's not perfect, but should work 80% of the time and flip it correctly.

Awesome thats perfect. I will keep up-to-date with the nightlies. Thanks for your help!

[ktilcu]

(22nd August 03:13)ktilcu Wrote:  

(22nd August 00:10)Craig Wrote:  Normally yes, but because of the way the imagemap plugin works not in this case... it's actually a good catch since I never thought about this discrepancy...

Check-out the fiddle example again that includes the latest commit, as I've added some extra code to take this into account in the imagemap plugin. It's not perfect, but should work 80% of the time and flip it correctly.

Awesome thats perfect. I will keep up-to-date with the nightlies. Thanks for your help!

Do you know if there would be a good way within this tool to grab an element attribute on the image map and pass it to an ajax loaded tooltip? Looking at the fiddle each county would have an attribute that I would want to pass to the ajax loaded content. (ie ajax.php?countyname) to load dynamic info in the tooltip.

[Craig]

Sure, use an each loop:

JS Code

$('area').each(function() {
	$(this).qtip({
		content: {
			ajax: {
				data: { content: $(this).attr('tooltipcontent' }
			}
		}
	});
});

[ktilcu]

(25th August 18:24)Craig Wrote:  Sure, use an each loop:

JS Code

$('area').each(function() {
	$(this).qtip({
		content: {
			ajax: {
				data: { content: $(this).attr('tooltipcontent' }
			}
		}
	});
});

I probably did a bad job explaining. So in the simplest way possible, if I had an image map with different areas, one of which being:

JS Code

<area shape="poly" coords="66,25,50,38,53,60,67,81,57,90,61,93,36,98,26,22" href="#" alt="EscambiaCounty">

An I wanted to load a separate page via ajax:

JS Code

content: {
            text: 'Loading...',
            ajax: {url:'ajax.php'}
         }

Is there a way to load the ajax.php and pass in the <alt> attribute from the <area> tag?

So it would call the php page like this:

JS Code

ajax.php?EscambiaCounty

I hope I explained better this time.

[Craig]

Uh huh

JS Code

$('area').each(function() {
   $(this).qtip({
      content: {
         ajax: {
            url: 'ajax.php? ' + $(this).attr('alt')
         }
      }
   });
});