#10049 closed bug (worksforme)

Opened May 20, 2014 08:03AM UTC

Closed May 24, 2014 12:31PM UTC

Last modified May 26, 2014 05:44PM UTC

"right" class missing for feedback.horizontal in ui.tooltip

Reported by: simon.ferndriger Owned by: simon.ferndriger
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:
Description

When initializing jQuery UI Tooltip as follows:

$(document).tooltip({
		show: true,
		hide: false,
		position: {
			my: 'center top',
			at: 'center bottom+7.5',
			using: function(position, feedback){
				$(this).css(position);
				$(this).addClass(feedback.horizontal);
				$(this).addClass(feedback.vertical);
			}
		}
	 });

The horizontal feedback for tooltips works just fine for most elements, the .ui-tooltip receives the class .left resp. .right. However, for elements inside a fixed positioned header, this does not work.

Example:

http://lookr.com/1249043220

  • It works when you move the mouse from below over the left side menu and keep the mouse at the border. Then the tooltip appears with a pointer on the left side
  • It does NOT work for the "scroll-to-top" link on the top right corner in the fixed header navigation. The pointer appears in the middle like with the regular inline tooltips, because the container (.ui-tooltip) does not receive the left/right class.
Attachments (0)
Change History (5)

Changed May 20, 2014 11:45AM UTC by scottgonzalez comment:1

owner: → simon.ferndriger
status: new → pending

We'll need a reduced test case showing the problem. We don't debug full sites.

Changed May 23, 2014 09:19PM UTC by simon.ferndriger comment:2

status: pending → new

Of course. I finally succeeded in isolating a proper test case:

http://jsfiddle.net/7DRH9/2/

Seems that it fails to trigger the "right" class because of the padding. If you leave it out, it works at least partially ("left" is added as feedback instead of "right"), but at least there is some feedback.

Changed May 24, 2014 12:31PM UTC by scottgonzalez comment:3

resolution: → worksforme
status: new → closed

Looking at that fiddle, the top tooltip looks like it's centered pretty well under the orange block, so there's no reason for the right class to be added. The classes are based on a scale, not based on whether the tooltip was moved a singled pixel. You can use the left, top, width, and height properties if you need more granular control.

Changed May 26, 2014 06:56AM UTC by simon.ferndriger comment:4

OK, you are right, the example was unfortunately not reproducing the case as on Lookr. Seems to be very hard to find out what the (complex) setting might be. However, if you remove the padding on Lookr of the corresponding <a> element, the tooltip works and adds the '.right' class. But as you mentioned, you probably are not interested in a case on a full website.

However, in trying to reproduce this error, I found a new one - if you look closely, you can see that the wrong horizontal class is added ('.left' instead of '.right'). I updated the previous fiddle to show this:

http://jsfiddle.net/7DRH9/4/

Changed May 26, 2014 05:44PM UTC by scottgonzalez comment:5

Please create a new ticket for the new issue. If possible, please reduce to using just the position plugin since that's where the problem is.