angular - 我们在 mat-tooltip 中没有动态内容选项吗？

Question

我是 Angular Material 组件的新手，我们正在使用 mat-tooltip 来显​​示所有元素的工具提示内容。

当我们使用带有静态内容的工具提示时，它会正确显示，如下所示。

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

现在，我需要 mat-tooltip 来显​​示动态内容，而不仅仅是纯文本。

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

我需要这个 div 在悬停在另一个元素上时显示。 mat-tooltip 有可能吗？非常感谢任何帮助。

Answer 1

它在 MatToolTip 中不可用，但您可以使用 Angular CDK 通过使用 cdk 的 OverlayModule 来实现自定义工具提示。我最近实现了一个显示自定义工具提示的自定义工具提示指令。这是工作中的 stackblitz - https://stackblitz.com/edit/angular-s7zevt?file=app%2Ftool-tip-renderer.directive.ts

首先，有一个组件将像这样托管在 Overlay 中 -

/**
 * 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() {
  }

} 

现在有一个指令将使用覆盖层来呈现上面的组件 -

@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();
    }
  }

}

在相应模块中声明上述组件和指令。

现在像这样使用它的自定义工具提示 -

<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>

要显示类似于 MatToolTip 的字符串，请像这样使用它 -

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