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中不是开箱即用的，但是您可以使用cdk的OverlayModule来利用Angular CDK来实现自定义工具提示。我最近实现了一个自定义工具提示指令，该指令显示了自定义工具提示。这是有效的堆叠闪电战-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

遗憾的是，Angular Material 的 mat-tooltip 不支持传递模板。

您可以查看 GitHub #5440 (comment) 上的讨论。

但是有一个扩展的 Material 组件来实现它。检查示例 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>

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

2 个答案: