[Solved] qtip off in firefox and google chrome

[mickey]

Hi

I have qtip applied to an image map but when it shows up on firefox and chrome - it is showing at the lower left corner of the screen! in IE it is perfectly fine but in these other 2 browsers it is not. I could not get it to appear it should.

Note that - the example on the internet works just fine even if i copy it to my own code.

Would you guys have any idea? Would you need a screen shot? Its just a map of my city, divided into polygons. Everytime i hover with my mouse using the code in QTIP's exmaple page, it will show off right at the corner left of the screen.

Please advise thanks in advance.

[Craig]

mickey, we'll need to see your code and a screenshot so we can assist!

[mickey]

Hi Craig!

Thanks for trying to help me. Here is a screenshot that works on IE:



And that does not work on firefox/chrome:



Here is my code that activates the qtip when a user clicks on a location:

JS Code

$(selector).qtip({
   content: {
     text: label 
   },  
   position: { 
	corner: { target: 'center', tooltip: 'bottomMiddle'}, 
	adjust: { x: -5, y: 0 } 
   },
   // show immediately
   show: { when : false, ready : true },   
   hide: { when: { event: 'unfocus' }, delay: 1000 },
    style: {
          border: {
             width: 2,
             radius: 4
          },
          padding: 3, 
          textAlign: 'center',
          tip: true, // speech bubble
          name: 'dark' // preset style
       }
  });

And here is the Manila coordinates:

JS Code

<area alt="Manila" shape="polygon" coords="53,132, 52,133, 51,133, 49,133, 47,133, 45,132, 
43,133, 40,134, 34,134, 29,134, 30,135, 30,137, 36,137, 41,137, 42,150, 42,163, 36,164, 29,166, 
30,167, 30,168, 37,167, 44,167, 45,168, 45,169, 47,170, 49,171, 48,174, 46,175, 48,178, 51,181, 
52,180, 53,180, 57,184, 61,186, 63,193, 66,199, 67,200, 67,201, 72,200, 77,199, 82,193, 88,188, 
89,187, 90,187, 91,185, 93,183, 95,179, 97,176, 100,172, 102,169, 98,165, 96,161, 82,152, 
70,141, 71,137, 72,132, 70,132, 69,131, 70,128, 71,125, 70,125, 68,125, 66,128, 64,131, 63,130, 
61,129, 61,131, 61,132, 57,132, 53,132">

Note that even if i strip off all the CSS on the page, its still like that. I copied the same coordinates from the qtip example into the same page and it works just fine on both FF and IE, but my own imagemap it doesn't for some reason I do not know.

Many thanks in advance and Merry Christmas!!

[Craig]

That's odd.... are you getting any errors?

[mickey]

Hi Craig

Appreciate so much your trying to help. There is no error. Would you like me to pack the source code in a ready to debug package? So you just unzip and start troubleshooting?

Otherwise let me know what else you want to know or let me find out.

Thanks.

Edit:

I already package the source code - very small just my city map and the code that triggers the qtip + the area coordinates. Please let me know if you want me to send this to you and to which email address if you desire.

Thanks.

[Craig]

Hey mickey, could you possibly port that code over o a jsfiddle example please? http://jsfiddle.net/craga89/fDavN/

[mickey]

here you go Craig! http://jsfiddle.net/qr2BJ/1038/

This JSFiddle looks cool - anyway, see how the other plugin jquery map hilight works correctly, if you hover your mouse on the map, it highlights the border so the coordinates seems to be correct in that case.

See how when the page loads, qtip shows at the bottom of the screen, and not hovering on top of the map where it should be.

[Craig]

Hmm odd. Just throwing it out there but qTip 1.0 has quite basic imagemap support, you might be better off looking into converting over to qTip2, which has pixel-perfect area positioning

It also has a demo here which is of definite assistance: http://craigsworks.com/projects/qtip2/demos/imagemap

[mickey]

actually i was looking for qtip 2 but when i went to the download page i could not find it... lol... let me try again.

---

OH MY GOODNESS!!! Qtip 1 works perfectly!

The bug was this:

<area .... shape="polygon">

When i renamed polygon to "poly" its perfect!!! Dam that sux spent good hours trying to figure this out earlier and that was the only error.

Thanks Craig for trying to help though, wonderful library! Happy New Year! You will have my donation and support for a great library.

[Craig]

Aha! Always the simple things we miss heh... glad to see you got it working though!