如何以编程方式触发工具提示以在 Angular 2/4 中显示？

Question

我有一个工具提示“你好”，我想在我（单击）按钮时显示。 正在看这个：https://swimlane.github.io/ngx-ui/#tooltip 和其他工具提示库，但似乎都需要使用 dom，并且不以编程方式打开和关闭。

在角度 1 中，您可以执行以下操作： http://plnkr.co/edit/QeQqqEJAu1dCuDtSvomD?p=preview

<!-- Popover can be controller by the following checkbox -->
<label>
  <input type="checkbox" ng-model="isOpen">
  show popover?
</label>

<br>

<!-- isOpen is a $scope variable -->
<span popover="Hello!" 
      popover-toggle="isOpen"
      popover-placement="bottom">
  Popover below
</span>

有没有一个库/方法可以用 Angular2 做到这一点？ （如果 ngx-ui 工具提示无法执行此操作）我正在使用引导程序和上面引用的库作为我的工具提示。如果有其他某种或某种方式的库我可以做到这一点，那就太好了。

Answer 1

您必须根据您的要求创建一个工具提示指令，下面是相同的代码，我支持鼠标悬停和聚焦。

指令：

import { Directive, ElementRef, Input, HostListener, Renderer } from '@angular/core';

@Directive(
    {
        selector: '[Tooltip]',
    }
)

export class TooltipDirective {

constructor(public el: ElementRef, public renderer: Renderer) { }
tooltipTitle: any = '';
tooltipText: any = '';
tooltipImage: any = '';
isFormFieldModel: boolean = false;
@Input() dataContext: any;
@Input() IsButtonPanel: boolean = false;

private mouseTop: number = 0;
private mouseLeft: number = 0;
tooltipTop: number = 0;
tooltipLeft: number = 0;

@HostListener('click') onclick() {
    this.hover(false);
}

@HostListener('mouseenter', ['$event']) onMouseEnter(event: MouseEvent) {
    this.SetTooltipDetails(event);
}
@HostListener('mouseleave') onMouseLeave() {
    this.hover(false);
}

@HostListener('focusin') onFocus() {
    this.SetTooltipDetails(null);
}

@HostListener('focusout') onFocusout(target) {
    this.hover(false);
}

SetTooltipDetails(event: MouseEvent)
{
    this.hover(false);
    if (this.mainDiv != null) {
        this.mainDiv.remove();
        this.ImgElement.remove();
    }


    if (event != null) {
        this.mouseLeft = event.clientX;
        this.mouseTop = event.clientY;
    }
    else
    {
        this.mouseLeft = this.el.nativeElement.getBoundingClientRect().left;
        this.mouseTop = this.el.nativeElement.getBoundingClientRect().top + 20;
    }         

    if (this.dataContext != null) {

        this.tooltipText = this.dataContext.Description;           

        if (this.isFormFieldModel) {
            if (!this.dataContext.IsShowToolTip) {
                return;
            }
            if (this.dataContext.UseContextHeader == true && this.dataContext.ContextHeaderValue != null) {
                this.tooltipTitle = this.dataContext.ContextHeaderValue;
            }
            else {
                this.tooltipTitle = this.dataContext.PrettyName;
            }
        }
        else {                
            this.tooltipTitle = this.dataContext.Header;
            this.tooltipImage = this.dataContext.Icon;
        }

        if (this.tooltipTitle == '' || this.tooltipTitle == null || this.tooltipTitle == 'null') {
            this.tooltipTitle = "Header";
        }

        if (this.tooltipText == null || this.tooltipText == 'null') {
            this.tooltipText = "";
        }

        if (this.tooltipImage==null || this.tooltipImage == '' || this.tooltipImage == 'null') {
            this.tooltipImage = "info.png";
        }

        this.hover(true);
    }
}    

mainDiv: any; ImgElement: any; InputElement: any; divElement: any; divElement1: any; divElement2: any;
hover(onMouseHover: boolean) {

    if (onMouseHover && !this.IsButtonPanel) {
        //Dynamically Create Img Element   

        var elementTooltipItem = this.el.nativeElement.getElementsByClassName("tooltipMain")[0];
        if (elementTooltipItem != null) {
            elementTooltipItem.outerHTML = '';
        }            
        else
        {
            let tooltipItem = this.el.nativeElement.nextElementSibling;
            if (tooltipItem != null && tooltipItem.className.indexOf("tooltipMain") >= 0)
            {
                tooltipItem.outerHTML = '';
            }
        }

        this.ImgElement = this.renderer.createElement(this.el.nativeElement, "img");

        this.renderer.setElementAttribute(this.ImgElement, "src", "images/" + this.tooltipImage);

        this.renderer.setElementStyle(this.ImgElement, "width", "40px");
        this.renderer.setElementStyle(this.ImgElement, "height", "40px");
        this.renderer.setElementStyle(this.ImgElement, "margin-right", "2px");
        this.renderer.setElementStyle(this.ImgElement, "float", "left");
        this.renderer.setElementStyle(this.ImgElement, "border", "1px solid #CCC");
        this.renderer.setElementStyle(this.ImgElement, "border-radius", "5px");
        this.renderer.setElementStyle(this.ImgElement, "padding", "5px");
        this.renderer.setElementStyle(this.ImgElement, "backgroundColor", "#f5f5f5");
        this.renderer.setElementStyle(this.ImgElement, "display", "block");

        //tooltip text outer div

        this.divElement = this.renderer.createElement(this.el.nativeElement, "div");

        this.renderer.setElementStyle(this.divElement, "border", "1px solid #CCC");
        this.renderer.setElementStyle(this.divElement, "margin-left", "38px !important");
        this.renderer.setElementStyle(this.divElement, "color", "black");
        this.renderer.setElementStyle(this.divElement, "border-radius", "5px");
        this.renderer.setElementStyle(this.divElement, "padding", "5px");
        this.renderer.setElementStyle(this.divElement, "float", "left");
        this.renderer.setElementStyle(this.divElement, "backgroundColor", "#f5f5f5");
        this.renderer.setElementStyle(this.divElement, "text-align", "left !important");

        //tooltip text header div

        this.divElement1 = this.renderer.createElement(this.el.nativeElement, "div");

        this.renderer.setElementClass(this.divElement1, "header", true);
        this.renderer.createText(this.divElement1, this.tooltipTitle);


        //tooltip text description div

        this.divElement2 = this.renderer.createElement(this.el.nativeElement, "div");

        this.renderer.setElementClass(this.divElement2, "description", true);
        this.renderer.createText(this.divElement2, this.tooltipText);


        this.mainDiv = this.renderer.createElement(this.el.nativeElement, "div");

        this.renderer.setElementProperty(this.mainDiv, "disabled", true);
        this.renderer.setElementClass(this.mainDiv, "tooltipMain", true);

        this.mainDiv.appendChild(this.ImgElement);
        this.divElement.appendChild(this.divElement1);
        this.divElement.appendChild(this.divElement2);
        this.mainDiv.appendChild(this.divElement);


        let tooltipWidth = this.mainDiv.clientWidth + 10;
        let tooltipHeight = this.mainDiv.clientHeight + 10;

        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        if ((windowWidth - this.mouseLeft) < tooltipWidth) {
            //this.tooltipLeft = windowWidth - (tooltipWidth);
            this.renderer.setElementStyle(this.mainDiv, "right", "0px");
        } else {
            //this.tooltipLeft = this.mouseLeft;
            this.renderer.setElementStyle(this.mainDiv, "left", this.mouseLeft + "px");
        }

        if ((windowHeight - this.mouseTop) < tooltipHeight) {
            this.tooltipTop = this.mouseTop - 20;
            this.renderer.setElementStyle(this.mainDiv, "bottom", "0px");
        } else {
            this.renderer.setElementStyle(this.mainDiv, "top", this.mouseTop + 5 + "px");
        }


        //this.renderer.setElementStyle(this.mainDiv, "left", this.tooltipLeft + "px");
        //this.renderer.setElementStyle(this.mainDiv, "top", this.tooltipTop + "px");  
    }
    else {
        if (this.mainDiv != null) {
            this.mainDiv.remove();
            this.ImgElement.remove();
        }
    }
}
}

在 HTML 组件处：

这里的 dataContext 是一个对象，其中包含描述等工具提示详细信息，您可以根据需要进行配置

<div Tooltip [dataContext]="dataContext"></div>

输出：