Структурные директивы, всплывающая подсказка

Я создал структурную директиву, которая отображает всплывающую подсказку на основе того, что находится внутри ng-template, когда я нахожу курсор на текст «см. Всплывающую подсказку», всплывающая подсказка отображается правильно, но отображается вверху: 0px слева: 0px позиция от экран, я хочу, чтобы он отображался чуть выше текста «см. всплывающую подсказку», я достиг размеров elementRef с помощью метода «getBoundingClientRect ()», но я не знаю, как применить их во всплывающей подсказке. Любая идея?

tooltip.directive.ts

import { Component, Input, HostListener,  Directive, ElementRef, 
TemplateRef, ViewContainerRef,  ContentChild, ComponentRef } from 
'@angular/core';

@Directive({ selector: '[tooltipDirective]' })
export class TooltipDirective {
private tooltipId: string;
private dimensiones:{};
constructor(private elementRef: ElementRef,
          private viewContainerRef: ViewContainerRef) { }

@Input() parametroPlantilla: TemplateRef<any>;
@ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef 
 <Object>;
@HostListener('mouseenter')  onMouseEnter(): void {    
this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
this.dimensiones = this.elementRef.nativeElement.getBoundingClientRect();   
}
@HostListener('mouseleave')  onMouseLeave(): void {        
 if (this.viewContainerRef) {
    this.viewContainerRef.clear();
  }  
 }  
}

display.component.ts

...Some stuff

<div tooltipDirective>See tooltip!
  <ng-template #tooltipTemplate >      
      <div>   
          This is my tooltip!
      </div>      
  </ng-template>  
</div>

angular tooltip ng-template
person ararb78    schedule 21.10.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Я бы добился этого, переместив сгенерированную всплывающую подсказку внутри элемента хоста, поэтому я бы использовал только правила css для определения позиции:

tooltip.directive.ts

@Directive({ selector: '[tooltipDirective]' })
export class TooltipDirective {
  private tooltipId: string;

  constructor(
      private renderer: Renderer2,
      private elementRef: ElementRef,
      private viewContainerRef: ViewContainerRef) { }

  @Input() parametroPlantilla: TemplateRef<any>;

  @ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef<Object>;

  @HostListener('mouseenter')  onMouseEnter(): void {    
    const view = this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
    view.rootNodes.forEach(node => 
      this.renderer.appendChild(this.elementRef.nativeElement, node));
  }

  @HostListener('mouseleave') onMouseLeave(): void {        
    if (this.viewContainerRef) {
      this.viewContainerRef.clear();
    }  
  }  
}

html

<div tooltipDirective>See tooltip!
  <ng-template #tooltipTemplate>      
      <div class="tooltip">   <================ add class
          This is my tooltip!
      </div>      
  </ng-template>  
</div>

css

[tooltipDirective] {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 1px rgba(0,0,0,.6);
}

Пример Stackblitz

person yurzui    schedule 22.10.2017
comment
Большое спасибо! это сработало! но я не уверен, что делает эта строка кода: view.rootNodes.forEach (node ​​= ›this.renderer.appendChild (this.elementRef.nativeElement, node) Не могли бы вы объяснить это? - person ararb78; 22.10.2017
comment
По умолчанию ваш тег <div class="tooltip" размещается рядом с текущим элементом. Этот код вставляет его внутрь <div tooltopDirective - person yurzui; 22.10.2017
comment
Кто-нибудь знает, как я могу интегрировать анимацию при отображении всплывающей подсказки? - person ararb78; 22.10.2017
comment
Какую анимацию вы хотите применить? - person yurzui; 22.10.2017
comment
Такая анимация, как затухание и затухание с переходом, я не знаю, как ее применить. - person ararb78; 22.10.2017
comment
Можем ли мы определить tooltipTemplate внутри директивы? - person Sharan Mohandas; 27.10.2017
comment
Я хотел бы отрендерить существующий компонент - person Sharan Mohandas; 27.10.2017
comment
Yuruzi, поэтому в основном он добавляет его как родного брата из-за createEmbedddedView, а затем перемещает как дочерний элемент? (Потому что один и тот же элемент не может быть дважды?) - person Royi Namir; 20.01.2018