I am using the latest version of Angular and Material, as of this question's publishment.

I've managed to change the background and text color of the tooltip, overriding these variables:

--mdc-plain-tooltip-container-color: white !important;
//--mdc-plain-tooltip-container-border: 1px solid blue !important;
--mdc-plain-tooltip-supporting-text-color: var(--logo-blue) !important;

(The commented line is an attempt to follow the same logic, but with no luck)

But failed to find a way to apply a simple border to it.

I even got into the source files of the Material library and didn't find any CSS for that anywhere.

Unfortunately I cannot even check the elements in the DOM for this tooltip, because it disappears when I hover off of it.

Would appreciate to know of a way to add the border to the Material tooltip element...

I am using the latest version of Angular and Material, as of this question's publishment.

I've managed to change the background and text color of the tooltip, overriding these variables:

--mdc-plain-tooltip-container-color: white !important;
//--mdc-plain-tooltip-container-border: 1px solid blue !important;
--mdc-plain-tooltip-supporting-text-color: var(--logo-blue) !important;

(The commented line is an attempt to follow the same logic, but with no luck)

But failed to find a way to apply a simple border to it.

I even got into the source files of the Material library and didn't find any CSS for that anywhere.

Unfortunately I cannot even check the elements in the DOM for this tooltip, because it disappears when I hover off of it.

Would appreciate to know of a way to add the border to the Material tooltip element...

• css
• angular
• sass
• angular-material
• tooltip

Share Improve this question Follow asked Nov 16, 2024 at 17:48 TheCuBeManTheCuBeMan 2,50344 gold badges2727 silver badges4141 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

There is no css variable for setting border because the border styling is not present. I can only see border-radius property CSS variable.

So you have to define the CSS manually, like shown below.

.mat-mdc-tooltip-surface {
  --mdc-plain-tooltip-container-color: white !important;
  //--mdc-plain-tooltip-container-border: 1px solid blue !important;
  --mdc-plain-tooltip-supporting-text-color: var(--logo-blue) !important;
  border: 1px solid black;
}

Stackblitz Demo

---

To debug such scenarios, you have to have the chrome debugger open in the same tab as your app, then go to sources tab and keep it open. Hover over the item to show the tooltip and press F8 key this will trigger a breakpoint and the hover will also be visible, now you can simply use the element inspector and inspect the CSS for the tooltip.