Angular material tooltip with multiline text

How to break lines inside of a matTooltip

Official Angular Material Logo from https://angular.io/presskit

API reference for Angular Material tooltip:

import {MatTooltipModule} from ‘@angular/material/tooltip’;

We need to import the reference for the directive inside our main angular module.

The main idea to achieve multiline text inside the element is to write a function inside our component that returns either the static or dynamic text that we want to break lines in.

First, we need to add the matTooltip directive to the HTML view with the name of the function that returns our text that will be shown inside our tooltip.

In the component file, we need a function that returns as a string the wanted tooltip text.

In our example, let's say we have to display information about two events in a tooltip. The displayed text should have a line break between the two event information. We will display the name with the start and end date of the given event.

Having a return statement, as shown above, will take into consideration our white spaces, in our case the line break.

The result may be similar

The toLocalString method returns a string with a language sensitive representation of this date.

For more information consider reading: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

The matTooltipPosition allows the user to define the position of the tooltip relative to the parent element

For more information consider reading: https://material.angular.io/components/tooltip/api

Thank you for your time and keep on coding.