Comment déclencher par programmation une infobulle à afficher en Angulaire 2/4?

Question

J'ai une info-bulle "Bonjour" Je veux montrer quand je (clique) sur un bouton. Était en regardant ceci: https://swimlane.github.io/ngx-ui/#tooltip et d'autres bibliothèques d'info-bulle, mais tous semblent exiger l'utilisation de la dom, et ne pas ouvrir et fermer par programmation.

Dans angulaire 1, vous pouvez faire quelque chose comme ceci: 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> 

Y at-il une bibliothèque/comme je peux le faire avec Angular2? (Si l'infobulle ngx-ui est incapable de faire cela) J'utilise bootstrap et la bibliothèque référencée ci-dessus pour mes info-bulles. S'il y a une autre bibliothèque ou quelque chose que je peux faire, ce serait génial.

Answer 1

Vous devez créer une directive Tooltip selon vos besoins, ci-dessous est le code pour le même, j'ai soutenu la souris et la mise au point.

directive:

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

à des composants HTML:

ici DataContext est un objet qui détiennent les détails infobulle comme la description et d'autres, vous pouvez configurer selon vos besoins

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

Sortie: