-
Notifications
You must be signed in to change notification settings - Fork 6.7k
fix(tooltip): Tooltip misplaced near right side #4311
Conversation
When the tooltip is near the right side of the first parent with relative positionning, the box size used to compute the tooltip position can change after the new location is set. Then, it is required to reset the position (top: 0, left: 0) before computing the position. Closes: #4195
This does not quite solve the problem, as can be seen here - note that in smaller viewports it does indeed work fine. It appears almost as if it only needs to be applied conditionally. |
I am on it :) |
Another issue when the box size change when tooltip is relocated.
Is there an issue associated with the problem? |
See my example with your changes I linked - it demonstrates a positioning problem that results. |
Here is my new positionTooltip function version: var positionTooltip = function() {
if (!tooltip) { return; }
// Reset the positioning and box size for correct width and height values.
tooltip.css({ top: 0, left: 0, width: 'auto', height: 'auto' });
var ttBox = $position.position(tooltip);
var ttCss = $position.positionElements(element, tooltip, ttScope.placement, appendToBody);
ttCss.top += 'px';
ttCss.left += 'px';
ttCss.width = ttBox.width + 'px';
ttCss.height = ttBox.height + 'px';
// Now set the calculated positioning and size.
tooltip.css(ttCss);
}; For me it fixes your new problem too. |
@dabos-GFI we will also need tests for this. |
I think for this sort of issue it's ok for there not to be tests. |
Edited example with last version of bootstrap-ui http://plnkr.co/edit/JU1jwv?p=preview |
This is a rollup commit intended to address several issues around the positioning and parsing of attributes. - Fixes issue introduced under PR angular-ui#4311 where setting height and width in tooltip position function messed up arrow placement. - Fixes issue introduced under PR angular-ui#4363 where setting visibility to hidden in tooltip position function caused elements in popover to lose focus. - Fixes issue angular-ui#1780 where tooltip would render if content was just whitespace. - Fixes issue angular-ui#3347 where tooltip isolate scope was being accessed after it was set to null. Observers will now be created/destroyed as tooltip opens/closes which will also offer a performance improvement. - Fixes issue angular-ui#3557 by implementing evalAsync to set tooltip scope isOpen property. - Fixes issue angular-ui#4335 where if model isOpen property is undefined, tooltip would call show/hide toggle function. - Closes PR angular-ui#4429 where how the templated content was being evaluated could cause an infinite digest loop. Closes angular-ui#4400 Closes angular-ui#4418 Closes angular-ui#4429 Closes angular-ui#4431 Closes angular-ui#4455 Fixes angular-ui#1780 Fixes angular-ui#3347 Fixes angular-ui#3557 Fixes angular-ui#4321 Fixes angular-ui#4335
This is a rollup commit intended to address several issues around the positioning and parsing of attributes. - Fixes issue introduced under PR angular-ui#4311 where setting height and width in tooltip position function messed up arrow placement. - Fixes issue introduced under PR angular-ui#4363 where setting visibility to hidden in tooltip position function caused elements in popover to lose focus. - Fixes issue angular-ui#1780 where tooltip would render if content was just whitespace. - Fixes issue angular-ui#3347 where tooltip isolate scope was being accessed after it was set to null. Observers will now be created/destroyed as tooltip opens/closes which will also offer a performance improvement. - Fixes issue angular-ui#3557 by implementing evalAsync to set tooltip scope isOpen property. - Fixes issue angular-ui#4335 where if model isOpen property is undefined, tooltip would call show/hide toggle function. - Closes PR angular-ui#4429 where how the templated content was being evaluated could cause an infinite digest loop. Closes angular-ui#4400 Closes angular-ui#4418 Closes angular-ui#4429 Closes angular-ui#4431 Closes angular-ui#4455 Fixes angular-ui#1780 Fixes angular-ui#3347 Fixes angular-ui#3557 Fixes angular-ui#4321 Fixes angular-ui#4335
When the tooltip is near the right side of the first parent with relative positionning, the box size used to compute the tooltip position can change after the new location is set.
Then, it is required to reset the position (top: 0, left: 0) before computing the position.
Closes: #4195