0

Using tipsy.js for my tooltips. Works fine when the trigger only spans 1 line of text, but if a longer trigger wraps to the next line, it will just center the tooltip in that content area. Any help getting this to position correctly would be greatly appreciated. Thanks! Rich

user1050887
  • 195
  • 3
  • 13

1 Answers1

2

Just to throw my towel in. According to tipsy.js docs, you could set up a gravity option for positioning the tip like this :

$('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se

You could also default it to either North/South - NS (or) West/East - WE :

As of version 0.1.3, it's possible to use a callback function to set the gravity dynamically at hover-time. Within the callback, this refers to the active element, and the function should return the calculated gravity as a string. Two demo callbacks are supplied - $.fn.tipsy.autoNS and $.fn.tipsy.autoWE - which select north/south and west/east gravity, respectively.

Here's how you could do it:

$('#foo').tipsy({gravity: $.fn.tipsy.autoNS}); //or $.fn.tipsy.autoWE

Hope this helps.

EDIT Based on what you need, this question will fit your needs. The question was abt how to make the tip follow the mouse, hence positioning it over the hovered content.

Here's your updated demo : http://jsfiddle.net/Tq3gD/3/

This involves a lil change in plugin code (I've added that to your fiddle as well) - There's now a new option called follow which can be set to x or y.

But please note that you could do only this much to make this plugin customisable. for more out of the box functionality, I'd recommend using something in this list.

Community
  • 1
  • 1
krishwader
  • 11,341
  • 1
  • 34
  • 51
  • gravity = N. it works fine, and positions fine, on triggers that don't drop to a 2nd line. I think since it's positioning from the element and not the mouse position it trips up if the element is 2 lines of text and just throws it in the middle. Anyone know a way to position the tip based on mouse position instead, using the tipsy plugin? – user1050887 Jun 10 '13 at 16:20
  • @user1050887 please make a fiddle for this. I tried a demo and it was working fine for me – krishwader Jun 10 '13 at 16:22
  • look at this @user1050887 : http://jsfiddle.net/hungerpain/PAYxV/ works fine for me. or am i missing the whole point of this question? :) that might happen sometimes :) – krishwader Jun 10 '13 at 16:26
  • http://jsfiddle.net/geisleryoung/Tq3gD/ resize the pane until that link drops to two lines. then you hover and the tip just shows up in the middle, which technically is the center of that entire width so it's correct, but if it were based on mouse position, it would keep it more closely pinned to the actual trigger. Hope this clears it up! – user1050887 Jun 10 '13 at 16:48
  • appreciate the help, I'm getting close. I may still link up the long string, but for now I'm trying a superscript as the trigger. But placement is very buggy. A link will help, check out http://stonecastle.gydev.com/story/ login is geisler/young. In chrome they are way too low and offset to the right. they should be above, with the "s" gravity. In firefox they start off low and right, and then jump to the correct place. I thought maybe adding the image dimensions in the title to forcefeed that to tipsy would help, but no luck. Any ideas here? – user1050887 Jun 11 '13 at 14:20
  • where are you using tipsy here? There's just too many links over there :) – krishwader Jun 11 '13 at 14:27
  • sorry, thought I added that. On the bottom, the content to the right of the headshot, you'll see some superscripts... those are tipsy'd – user1050887 Jun 11 '13 at 14:59
  • @user1050887 have you tried http://www.opentip.org/ ? Seems like a very nice replacement for tipsy! – krishwader Jun 17 '13 at 08:34