Is it possible to have a list inside of an Angular Material Tooltip?

Question

Basically I would like to have a ul element inside of my Tooltip.

I'm using Angular 5, and the compatible Material for Angular 5.

Answer 1

The comment by Pavel Agarkov is in the right direction. To make things easy, create a custom pipe to automate converting your text into bulleted list items. The pipe is responsible for adding the bullets and the line feeds which will be formatted by the CSS class:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'tooltipList' })

export class TooltipListPipe implements PipeTransform {

  transform(lines: string[]): string {

    let list: string = '';

    lines.forEach(line => {
      list += '• ' + line + '\n'; 
    });

    return list;
  }
}

Define the CSS as Pavel suggested - and remember to add this to your global style sheet:

.tooltip-list {
  white-space: pre;
}

And pass an array of strings representing your list items to the MatToolip using the custom pipe, and apply the class to the tooltip:

<span
    [matTooltip]="['Wash car','Get a haircut','Buy milk'] | tooltipList" 
    matTooltipClass="tooltip-list">
  TODO List (hover)
</span>

Here it is on StackBlitz: https://stackblitz.com/edit/angular-o9sfai?file=styles.css