Topic: Change Tooltip Styling

stokkup2313 priority asked 2 weeks ago


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


Fahad Raza free commented 11 hours ago

Don’t miss out on the amazing deals offered by the Sonic Happy Hour Menu. Whether you're a soda lover or a fan of crispy sides, these limited-time specials guarantee satisfaction while keeping your wallet happy. Visit Sonic today!


Arkadiusz Idzikowski staff answered 2 weeks ago


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 1 week 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?


Arkadiusz Idzikowski staff commented 1 week ago

If you use SCSS variables please make sure to define them before the MDB styles import. Otherwise, the compiler will use the default MDB values. I think you may also need to remove the !important flags.



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