Search and Top Navigation
#9018 closed bug (notabug)
Opened January 27, 2013 04:42PM UTC
Closed January 28, 2013 08:06PM UTC
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
Attachments (0)
Change History (8)
Changed January 27, 2013 07:14PM UTC by comment:1
| status: | new → open |
|---|---|
| summary: | dynamic tooltip content updates are not re-positioned → Tooltip: content updates are not re-positioned |
Changed January 28, 2013 12:02AM UTC by comment:2
| owner: | → egodust |
|---|---|
| status: | open → pending |
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?
Changed January 28, 2013 08:18AM UTC by comment:3
| status: | pending → new |
|---|
Replying to [comment:2 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.
Changed January 28, 2013 01:41PM UTC by comment:4
| status: | new → pending |
|---|
Can you please point to real examples of tooltips that change content so that we can better evaluate the situation?
Changed January 28, 2013 02:28PM UTC by comment:5
| status: | pending → new |
|---|
Replying to [comment:4 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.
Changed January 28, 2013 02:38PM UTC by comment:6
| _comment0: | Cluetip doesn't change the content 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. → 1359383957897029 |
|---|---|
| status: | new → pending |
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.
Changed January 28, 2013 03:18PM UTC by comment:7
| status: | pending → new |
|---|
Replying to [comment:6 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.
Changed January 28, 2013 08:06PM UTC by comment:8
| resolution: | → notabug |
|---|---|
| status: | new → closed |
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.
Confirmed against master http://jsfiddle.net/tj_vantoll/d9Vrs/.