Fix tooltip/popover arrow size and position#25062
Merged
mdo merged 1 commit intotwbs:v4-devfrom Dec 27, 2017
Merged
Conversation
Closed
Member
|
Thank you so much @simonihmig 👍 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This overhauls the tooltip and popover arrows implementation, fixing a few problems:
1. arrows were not properly aligned to the trigger.
Fixes #25045 and fixes #23793
2. the
.arrowelement did not match the size and position of the actual visible arrow.Before:
After:
Same for tooltips. This possibly also fixes #23846, see #23846 (comment).
3. Fixed
$popover-arrow-height/$tooltip-arrow-heightThese Sass variables did not have any effect on the visual appearance. They were just used for the (wrong, see above) sizing of the
.arrowelement, which has absolutely no visible effect. Only$...-arrow-widthhad a visual effect, but it always determined implicitly both the width and height (height = width/2, so a 45° angle).Also the value for width was wrongly used, AFAICT. Setting it to
10pxwould lead to an arrow20pxwide. My understanding of these dimensions is that$popover-arrow-widthshould specify the width of the.arrow(for top or bottom placement), as can be seen on the second screenshot above.This has been fixed here. But for anyone who has customized the arrows with these variables, this would be a somewhat breaking change (the width will be the half of it as it has been before). But still I think this has to be done, as this restores that the assigned values now exactly match the visual dimensions.