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

Question

我是角材料组件的新手，我们正在使用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中没有开箱即用的功能，但是您可以使用OverlayModulecdk 来利用Angular CDK来实现自定义工具提示。我最近实现了一个自定义工具提示指令，该指令显示了自定义工具提示。这是工作中的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>

Answer 2

不幸的是，mat-tooltipAngular Material 不支持传递模板。

\n

您可以查看 GitHub 上的讨论#5440（评论）。

\n

但有一个扩展的 Material 组件可以实现它。检查示例mtx-tooltip。

\n

<button mat-raised-button [mtxTooltip]="tooltipTpl">\n  Action\n</button>\n\n<ng-template #tooltipTpl>\n  <div>This is a template!</div>\n  <div>Ceci est un mod\xc3\xa8le!</div>\n  <div>\xe8\xbf\x99\xe6\x98\xaf\xe4\xb8\x80\xe4\xb8\xaa\xe6\xa8\xa1\xe6\x9d\xbf!</div>\n  <div>\xe3\x81\x93\xe3\x82\x8c\xe3\x81\xaf\xe3\x83\x86\xe3\x83\xb3\xe3\x83\x97\xe3\x83\xac\xe3\x83\xbc\xe3\x83\x88\xe3\x81\xa7\xe3\x81\x99!</div>\n  <div class="text-right">\xd9\x87\xd8\xb0\xd8\xa7 \xd9\x82\xd8\xa7\xd9\x84\xd8\xa8!</div>\n</ng-template>\n

\n

\n