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
  • !34622

Convert tooltips and popovers to CSS vars

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Mark Otto requested to merge css-vars-tooltips into main Jul 29, 2021
  • Overview 5
  • Commits 6
  • Pipelines 0
  • Changes 8

Summary

This PR starts the process of migrating tooltips and popovers to use CSS variables. In doing so, I've deprecated three Sass variables in an effort to improve customization via CSS variables. See _variables.scss for the changes there.

Beyond that, this replaces the bulk of our Sass for tooltips and popovers with customizable CSS variables. Most are reassigned from the Sass variables and respect the same name, but as mentioned above, some deviation was required for a more sensible future friendly path.

Originally I expected tooltips and popovers to be a clusterfuck to customize, but thanks to the customClass option we recently added, this is basically a breeze. I've added the data attributes, wrote some basic styles, and added some lovely docs to explain and demonstrate the situation for folks.

Fixes #34221 (closed).

Preview

  • Tooltips: https://deploy-preview-34622--twbs-bootstrap.netlify.app/docs/5.1/components/tooltips/#custom-tooltips
  • Popovers: https://deploy-preview-34622--twbs-bootstrap.netlify.app/docs/5.1/components/popovers/#custom-popovers

Todos

  • Document deprecations maybe in the Migration guide?
  • Confirm all CSS vars are properly being used (fusv doesn't do that for us)
  • Adjust bundlewatch
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: css-vars-tooltips