结构指令，位置提示 [英] Structural directives, position tooltip

问题描述

我创建了一个结构化指令，当我将鼠标悬停在文本"see tooltip"上时，该指令根据ng-template内部的内容显示工具提示 工具提示正确显示，但显示在屏幕顶部:0px左侧:0px屏幕位置，我希望它显示在文本"see tooltip"的正上方，我已经使用方法实现了elementRef的尺寸getBoundingClientRect()"，但我不知道如何在工具提示中应用它们.有什么主意吗?

I have created a structural directive that displays a tooltip based on what is inside an ng-template, when I hover over the text "see tooltip" the tooltip is displayed correctly, but it is displayed in the top: 0px left: 0px position of the screen, I want it to be displayed just above the text "see tooltip", I have achieved the dimensions of the elementRef with the method "getBoundingClientRect()" but I do not know how to apply them in the tooltip. Any idea?

tooltip.directive.ts

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

display.component.ts

...Some stuff

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

推荐答案

我可以通过在主机元素内部移动生成的工具提示来实现它，因此我将仅使用css规则来定义位置:

I would achieve it by moving generated tooltip inside host element so i would use only css rules to define position:

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示例

Stackblitz example

这篇关于结构指令，位置提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！