Adding custom styles to matTooltip

Shahnshah — Sun, 28 Mar 2021 08:34:16 +0000

I recently came across this requirement and after getting stuck to style the matTooltip I finally managed to do it and thought it’s a good idea to share what I learned, here.

It’s very difficult to look at the structure of the Angular Material Tooltip because of it’s behavior when you try to inspect, so let me share the HTML first.

<div class="cdk-overlay-container">
     <div class="cdk-overlay-connected-position-bounding-box" dir="ltr"style="top: 0px; left: 0px; height: 100%; width: 100%;">
      <div id="cdk-overlay-1" class="cdk-overlay-pane mat-tooltip-panel"style="pointer-events: auto; top: 8px; left: 417.625px;">
      <mat-tooltip-component aria-hidden="true" class="ng-tns-c34-15 ng-star-inserted" style="zoom: 1;">
          <div class="mat-tooltip ng-trigger ng-trigger-                state"style="transform-origin: left center; transform: scale(1);">Info about the action</div>
      </mat-tooltip-component>
     </div>
    </div>
</div>

It’s half the problem solved when you can clearly see the structure of the HTML, next we’ll try to style it. Make sure to put these styles in your custom mixin.scss or styles.scss

.cdk-overlay-pane {  
 &.mat-tooltip-panel {  
  .mat-tooltip { 
  color: pink;
  background-color: white;
  border:  1px solid #eeeeee;
  border-radius:  3px;
  font-size:  15px;
  padding:  10px; 
  } 
 } 
}

That’s it. Now you know how to style a tooltip.

Thanks!

Publish your Storybook components on npm

Shahnshah — Sat, 20 Mar 2021 17:37:24 +0000

Storybook and Library setup

Create a new Angular Library using the steps from Angular.io

ng new my-workspace --create-application=false

cd my-workspace

ng generate library storybook-library

After these run the storybook installation simply by running:

npx sb init

This will install storybook, the required dependencies and update the scripts.

Once done run npm run storybook to launch it. There’s some existing boilerplate code when you run storybook for the first time to get you started with it.

Publish configuration

If you intend to publish your packages to a private or public repository you’ll need to change the configuration a little to include the registry url for the repository you’ll be using.

Open package.json from the projects folder of your workspace.

It’s important to add configuration to the right package.json. You now have two package.json files one in the root of your workspace and another under the projects folder.

Add the below configuration to enable publishing of your packages

"publishConfig": {
    "registry": "http://myprivaterepo.com/repository/private/"
}

If you’re using a public npm repository, you might need to create and account if you don’t have one. You’ll also need to login by using command npm login and then you can use npm publish from the build directory to publish your packages.

To build your storybook components or modules, you can run

npm run build

This will build your project and will put the final contents inside a directory similar to

dist / yourProjectName

You can now run npm publish from this directory to publish your packages.

DEV Community: Shahnshah

Adding custom styles to matTooltip

Publish your Storybook components on npm

Storybook and Library setup

Publish configuration