Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#10049 closed bug (worksforme)

"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.

Change History (5)

comment:1 Changed 6 years ago by Scott González

Owner: set to simon.ferndriger
Status: newpending

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

comment:2 Changed 6 years ago by simon.ferndriger

Status: pendingnew

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.

comment:3 Changed 6 years ago by Scott González

Resolution: worksforme
Status: newclosed

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.

comment:4 Changed 6 years ago by simon.ferndriger

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/

comment:5 Changed 6 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.