craigsworks.com - Support Forum

The navigation area of my client's web pages is a <map> element composed of polygonal <area> elements. Not surprisingly, qTips do not work on such targets, no doubt because they don't conform to the rectangular position.corner model qTip uses.

So...is there any way to position a qTip at a particular x-y point? Using jQuery I can obtain the particular point on the polygon that I would like the qTip to target, but I don't see any way to actually do it.

Thanks for any suggestions.

blisshome,

This is actually a feature I would very much like to look into, as it apepars very few tooltip scripts actually work with <area> elements. I'll look into it and slate it as proposed for beta4. Let me get back to you with a possible beta3 fix for it so you don't have to wait.

craig Wrote:blisshome,

This is actually a feature I would very much like to look into...

I hacked the Beta3 code a bit and actually got a tootip to appear in response to a mouseover over a polygonal area. Unfortunately it was appearing way down in the bottom left part of the window, partly offscreen. When I tried to correct for the screen positioning, it stopped working altogether.

FWIW, here's what I tried:

1. Created an fourth position.corner attribute called "polyarea" and put it right after "mouse in the beforeUpdate function.

2. Used target.attr('coords').split(',') to get the topmost right vertex of the polygon (that's peculiar to my needs; it could be generalized)

3. Set the target's corner to "topRight" and tooltip's corner to "bottomLeft"

4. Set target's posX and posY (i.e., offset().left and offset().right) to the vertex I got in step 2.

5. Stored the target's outerWidth() and target's outerHeight() in two variables (outerWidthTarget and outerWidthHeight). I did this in the HTML section, as well as faked it in the polyarea code section since the latter has no real width or height.

6. Wherever the target's offset(), outerWidth(), and outerHeight() calls were made, I substituted the variables created in the steps above.

Singing the newbie blues: Does this approach seem promising, or am I way off base?

*******************
Update 3/20/09:
*******************
It actually works! The code hadn't stopped working, but the positioning was still off, except that instead of half off the window to the lower left, the qTip had moved to the upper left and half off, where my downscrolling was preventing me from seeing it.

So, I revisited the target.offset() values and realized I had forgotten to include them in my posX and posY calculation. With Top and Left from the Offset added to these numbers the tip appears just where they should!

Joy.

blisshome,

You beat me to it! Would you mind emailing me the source code so I can take a look over the changes you made? I want to implement this ready for beta4. Cheers.