Topic: Change Tooltip Styling

stokkup2313 priority asked 6 days ago


Expected behavior Be able to change how a tooltip looks like the background color, font style, font family etc.


ukhano007 free commented 2 days ago

Starbucks Partner Central Login Login is an internal portal for Starbucks employees to access resources, benefits, and training. It’s a place to stay connected, informed, and empowered in your role as a partner.



The easiest way to do that would be to override SCSS or CSS variables. You can find the list of all available variables in the API section in the component documentation.

For example: https://mdbootstrap.com/docs/angular/components/tooltips/#api-section-css-variables


stokkup2313 priority commented 2 hours ago

I added this to my styles.scss file: $tooltip-max-width: 200px!important; $tooltip-opacity: 0.9!important; $tooltip-margin: null!important;

$tooltip-color: #000!important; $tooltip-padding-y: 6px!important; $tooltip-padding-x: 16px!important; $tooltip-font-size: 14px!important; $tooltip-bg: #fff!important; $tooltip-border-radius: 0.25rem!important;

do I need to do anything else to get this working?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 5.2.0
  • Device: Mac Desktop
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No