代码之家  ›  专栏  ›  技术社区  ›  MarcoLe

NGX引导-角度-手动关闭工具提示

  •  1
  • MarcoLe  · 技术社区  · 6 年前

    我现在尝试手动关闭一个工具提示与他的内部按钮。我使用tooltip指令来触发 tooltip.show() tooltip.hide() 方法。但它不起作用。每次都这么说 ...elm.show() is not a function . 使用的标记如下:

    <ng-template #tooltip>
         <button type="button" class="btn btn-danger" (click)="elm.hide()">Cancel</button>
    </ng-template>
    
    <button type="button" triggers="" placement="bottom" (click)="elm.show()"
             class="btn btn-success" [tooltip]="tooltip">
     Publish
    </button>
    

    有人知道如何从组件关闭工具提示吗?组件中的榆树如下所示:

    @ViewChild('tooltip') elm: TooltipDirective;
    

    我提供了一个配置好的stackblitz,以测试它是否有帮助: Example

    1 回复  |  直到 6 年前
        1
  •  1
  •   yurzui    6 年前

    要手动触发它,您应该参考驻留在 button[tooltip] 在模板中:

    HTML

    <button ... #tooltipTrigger="bs-tooltip" (click)="tooltipTrigger.show()"
    

    你可以问:我在哪里找到的? bs-tooltip 字符串? (源代码中) https://github.com/valor-software/ngx-bootstrap/blob/d9a89b427fa5c79d94cd609cdf574eaf7a143bf5/src/tooltip/tooltip.directive.ts#L25 )

    此外,为了关闭工具提示,必须使用 pointer-events: none

    全局样式.css

    .tooltip.tooltip.tooltip {
      pointer-events: all;
    }
    

    .tooltip {
      pointer-events: all !important;
    }
    

    Stackblitz Example