Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !25062

Fix tooltip/popover arrow size and position

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/simonihmig/fix-arrows into v4-dev Dec 23, 2017
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 3

Created by: simonihmig

This overhauls the tooltip and popover arrows implementation, fixing a few problems:

1. arrows were not properly aligned to the trigger.

Fixes #25045 (closed) and fixes #23793 (closed)

2. the .arrow element did not match the size and position of the actual visible arrow.

Before: image

After: image

Same for tooltips. This possibly also fixes #23846 (closed), see https://github.com/twbs/bootstrap/issues/23846#issuecomment-327465549.

3. Fixed $popover-arrow-height / $tooltip-arrow-height

These Sass variables did not have any effect on the visual appearance. They were just used for the (wrong, see above) sizing of the .arrow element, which has absolutely no visible effect. Only $...-arrow-width had 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 10px would lead to an arrow 20px wide. My understanding of these dimensions is that $popover-arrow-width should 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.

Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: github/fork/simonihmig/fix-arrows