Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

fix(tooltip): Tooltip misplaced near right side #4311

Closed
wants to merge 2 commits into from
Closed

fix(tooltip): Tooltip misplaced near right side #4311

wants to merge 2 commits into from

Conversation

dabos-GFI
Copy link
Contributor

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

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
@wesleycho
Copy link
Contributor

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.

@dabos-GFI
Copy link
Contributor Author

I am on it :)

Another issue when the box size change when tooltip is relocated.
@dabos-GFI
Copy link
Contributor Author

Is there an issue associated with the problem?
My solution is to reset the width and height, and to fix the tooltip width and height width the one use to locate the tooltip.
It seems to work.

@wesleycho
Copy link
Contributor

See my example with your changes I linked - it demonstrates a positioning problem that results.

@dabos-GFI
Copy link
Contributor Author

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.

@icfantv
Copy link
Contributor

icfantv commented Aug 31, 2015

@dabos-GFI we will also need tests for this.

@wesleycho
Copy link
Contributor

I think for this sort of issue it's ok for there not to be tests.

@wesleycho
Copy link
Contributor

This appears to work, as can be seen here and here - good work!

@wesleycho wesleycho added this to the 0.13.4 (Performance) milestone Aug 31, 2015
@wesleycho wesleycho closed this in 457f10c Aug 31, 2015
@dabos-GFI
Copy link
Contributor Author

Edited example with last version of bootstrap-ui http://plnkr.co/edit/JU1jwv?p=preview

jasonaden pushed a commit to deskfed/bootstrap that referenced this pull request Jan 8, 2016
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
jasonaden pushed a commit to deskfed/bootstrap that referenced this pull request Jan 8, 2016
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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants