Opened 7 years ago

Closed 7 years ago

#9018 closed bug (notabug)

Tooltip: content updates are not re-positioned

Reported by: egodust Owned by: egodust
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.10.0
Keywords: Cc:
Blocked by: Blocking:

Description

When the content property has a function which both returns content immediately and then later on via the response callback the later content is not positioned.

Example usage:

content: function(response) {

setTimeout( function() {
   response('larger than X by a lot');
}, 2000);

return 'X';
}

The problematic code is in jquery.ui.tooltips.js:224

// Content can be updated multiple times. If the tooltip already
// exists, then just update the content and bail.
tooltip = this._find( target );
if ( tooltip.length ) {
	tooltip.find( ".ui-tooltip-content" ).html( content );		
	return;
}

The code doesn't take into account that the new content might not make sense where it is and position()'s rules are not applied.

Adding the following after the above check fixes the problem but probably isn't an ideal fix because of the tracking feature.

tooltip.position( $.extend( {of: target}, this.options.position ) );

http://jsfiddle.net/gF3sG/ - an example of the problem but using 1.9.2

Change History (8)

comment:1 Changed 7 years ago by tj.vantoll

Status: newopen
Summary: dynamic tooltip content updates are not re-positionedTooltip: content updates are not re-positioned

Confirmed against master http://jsfiddle.net/tj_vantoll/d9Vrs/.

comment:2 Changed 7 years ago by Scott González

Owner: set to egodust
Status: openpending

It doesn't seem like like a good idea to have the tooltip move on its own after it has been displayed. Why are you not using a placeholder that approximates the size of the actual content?

comment:3 in reply to:  2 Changed 7 years ago by egodust

Status: pendingnew

Replying to scott.gonzalez:

It doesn't seem like like a good idea to have the tooltip move on its own after it has been displayed. Why are you not using a placeholder that approximates the size of the actual content?

I agree that moving the tooltip around after it has an established position may be jarring, however:

1) tooltip provides 'position' options which should be applied consistently and be documented when they are not and for what reason.

2) when the trigger is near the bottom edge and the tooltip is big enough to be positioned above the trigger the new content will have a collision with the trigger anyway because it isn't repositioned higher rather, e.g. http://jsfiddle.net/vqvHW/

In this particular case adding an approximation is difficult because the new content varies, i.e. sometimes multiple lines and sometimes an error message - in that case the tooltip is too high in the first instance and then has a weird gap and looks broken.

comment:4 Changed 7 years ago by Scott González

Status: newpending

Can you please point to real examples of tooltips that change content so that we can better evaluate the situation?

comment:5 in reply to:  4 Changed 7 years ago by egodust

Status: pendingnew

Replying to scott.gonzalez:

Can you please point to real examples of tooltips that change content so that we can better evaluate the situation?

http://plugins.learningjquery.com/cluetip/demo/ - hover over the second link on the page and it will load new content via Ajax that is much bigger than the initial content.

Also Chrome adds new content to the SSL info tooltip after you first click the padlock.

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

Status: newpending

Cluetip doesn't change the content of the tooltip, it delays the showing of the tooltip and shows a loading indicator in a different position.

As for Chrome, I see no tooltip when hovering and a fixed height tooltip after clicking.

Last edited 7 years ago by Scott González (previous) (diff)

comment:7 in reply to:  6 Changed 7 years ago by egodust

Status: pendingnew

Replying to scott.gonzalez:

Cluetip doesn't change the content of the tooltip, it delays the showing of the tooltip and shows a loading indicator in a different position.

So? the effect of hovering over a trigger for new/bigger content is there, it is in other jQuery tooltips as well such as http://craigsworks.com/projects/qtip2/demos/#ajax and http://craigsworks.com/projects/simpletip/# (see last example)

As for Chrome, I see no tooltip when hovering and a fixed height tooltip after clicking.

That 'fixed' tooltip changes depending on the sites you visit, the tooltip gets bigger if new content is needed to be displayed.

Anyway it really doesn't matter what other tooltip plugins are doing because the docs give this API:

 Function: A callback which can either return the content directly, or call the first argument, passing in the content, e.g., for Ajax content.

The content API doesn't state what would happen if content is updated whilst the tooltip is open, if you feel this isn't a bug but just a misuse of the API then just update the docs to state what to expect from the plugin.

comment:8 Changed 7 years ago by Scott González

Resolution: notabug
Status: newclosed

I'm not seeing any obvious changes in any of these examples. qtip and simpletip seem to update so fast that I don't even see them changing. I don't know what you're doing to get different content into the Chrome popup while it's open, so I can't see that behavior.

The description of tooltip's position option is certainly lacking. I've filed an issue to improve this: https://github.com/jquery/api.jqueryui.com/issues/94 Feel free to send a pull request if you have suggestions for the wording.

Note: See TracTickets for help on using tickets.