プログラムでツールチップをトリガして角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 tooltipがこれを行うことができない場合）私は上記のツールチップを参照しているブートストラップとライブラリを使用しています。何らかの種類のライブラリや何らかの方法でこれを行うことができれば、それは素晴らしいことです。

Answer 1

要件に応じてツールチップディレクティブを作成する必要があります。以下のコードは同じですが、私はマウスオーバーしてフォーカスをサポートしています。

指令：

コンポーネントのHTMLで

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

：

がここのDataContextを説明し、他の同様のツールチップの詳細を保持するオブジェクトですが、あなたがあなたの要件ごとに設定することができます

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

出力：