Dont we have option for dynamic content inside mat-tooltip?

Question

I am new to angular material components, we are using mat-tooltip to show the tooltip content on all elements.

It is showing up properly when we are using the tooltip with static content like below.

<mat-icon svgIcon="Back" matTooltip="Go to reports using this column"></mat-icon>

Now, I need mat-tooltip to show dynamic content, not just plain text.

<div #myTootltipContent>
 <span>tooltip text</span>
 <span>tootlip description</span>
</div>

I need this div to be shown on hover of another element. Is it possible with mat-tooltip? Any help is much appreciated.

Answer 1

It is not available out of the box in MatToolTip but you can make use of Angular CDK to implement a custom tooltip by using OverlayModule of cdk. I have recently implemented a custom tooltip directive which shows the custom tooltip. Here is the working stackblitz - https://stackblitz.com/edit/angular-s7zevt?file=app%2Ftool-tip-renderer.directive.ts

First, have a component which will be hosted in Overlay like this -

/**
 * This component will be used to show custom tooltip
 * 
 * This component will be rendered using OverlayModule of angular material
 * This component will be rendered by the directive on an Overlay
 * 
 * CONSUMER will not be using this component directly
 * This component will be hosted in an overlay by ToolTipRenderer directive
 * This component exposes two properties. These two properties will be filled by ToolTipRenderer directive
 * 1. text - This is a simple string which is to be shown in the tooltip; This will be injected in the ToolTipRenderer directive
 *    by the consumer
 * 2. contentTemplate - This gives finer control on the content to be shown in the tooltip
 * 
 * NOTE - ONLY one should be specified; If BOTH are specified then "template" will be rendered and "text" will be ignored
 */
@Component({
  selector: 'app-custom-tool-tip',
  templateUrl: './custom-tool-tip.component.html',
  styleUrls: ['./custom-tool-tip.component.css']
})
export class CustomToolTipComponent implements OnInit {

  /**
   * This is simple text which is to be shown in the tooltip
   */
  @Input() text: string;

  /**
   * This provides finer control on the content to be visible on the tooltip
   * This template will be injected in ToolTipRenderer directive in the consumer template
   * <ng-template #template>
   *  content.....
   * </ng-template>
   */
  @Input() contentTemplate: TemplateRef<any>;

  constructor() { }

  ngOnInit() {
  }

} 

Now have a directive which will use an overlay to render the above component -

@Directive({
  selector: '[customToolTip]'
})
export class ToolTipRendererDirective {

   /**
   * This will be used to show tooltip or not
   * This can be used to show the tooltip conditionally
   */
  @Input() showToolTip: boolean = true;

  //If this is specified then the specified text will be shown in the tooltip
  @Input(`customToolTip`) text: string;

  //If this is specified then specified template will be rendered in the tooltip
  @Input() contentTemplate: TemplateRef<any>;

  private _overlayRef: OverlayRef;

  constructor(private _overlay: Overlay,
              private _overlayPositionBuilder: OverlayPositionBuilder,
              private _elementRef: ElementRef) { }

  /**
   * Init life cycle event handler
   */
  ngOnInit() {

    if (!this.showToolTip) {
      return;
    }

    //you can take the position as an input to adjust the position
    //, for now, it will show at the bottom always; but you can adjust your code
      as per your need
    const positionStrategy = this._overlayPositionBuilder
                                 .flexibleConnectedTo(this._elementRef)
                                 .withPositions([{
                                                    originX: 'center',
                                                    originY: 'bottom',
                                                    overlayX: 'center',
                                                    overlayY: 'top',
                                                    offsetY: 5,
                                                }]);

    this._overlayRef = this._overlay.create({ positionStrategy});

  }

  /**
   * This method will be called whenever the mouse enters in the Host element
   * i.e. where this directive is applied
   * This method will show the tooltip by instantiating the CustomToolTipComponent and attaching to the overlay
   */
  @HostListener('mouseenter')
  show() {

    //attach the component if it has not already attached to the overlay
    if (this._overlayRef && !this._overlayRef.hasAttached()) {
      const tooltipRef: ComponentRef<CustomToolTipComponent> = this._overlayRef.attach(new ComponentPortal(CustomToolTipComponent));
      tooltipRef.instance.text = this.text;
      tooltipRef.instance.contentTemplate = this.contentTemplate;
    }    
  }

  /**
   * This method will be called when the mouse goes out of the host element
   * i.e. where this directive is applied
   * This method will close the tooltip by detaching the overlay from the view
   */
  @HostListener('mouseleave')
  hide() {
    this.closeToolTip();
  }

  /**
   * Destroy lifecycle event handler
   * This method will make sure to close the tooltip              
   */
  ngOnDestroy() {
    this.closeToolTip();
  }

  /**
   * This method will close the tooltip by detaching the component from the overlay
   */
  private closeToolTip() {
    if (this._overlayRef) {
      this._overlayRef.detach();
    }
  }

}

declare above component and directives in the respective module.

Now use it the custom tooltip like this -

<button mat-raised-button        
        aria-label="Button that displays a tooltip when focused or hovered over"
        customToolTip [contentTemplate]="template">
  Action
</button>

<ng-template #template>
    <div style="display: flex; flex-direction: column">
     <span>tooltip text</span>
     <span>tootlip description</span>
    </div>
 </ng-template>

To show a string similar to MatToolTip, use it like this -

<div customToolTip="Showing ToolTip from custom tooltip directive">
 //InnerHtml....
</div>

Answer 2

Unfortunately, mat-tooltip of Angular Material does not support to passing a template.

You can check the discussion on GitHub #5440 (comment).

But there has an extended Material component to achieve it. Check the examples mtx-tooltip.

<button mat-raised-button [mtxTooltip]="tooltipTpl">
  Action
</button>

<ng-template #tooltipTpl>
  <div>This is a template!</div>
  <div>Ceci est un modèle!</div>
  <div>这是一个模板!</div>
  <div>これはテンプレートです!</div>
  <div class="text-right">هذا قالب!</div>
</ng-template>