NGX-Bootstrap

Question

我目前尝试通过他的内部按钮手动关闭工具提示。我使用 tooltipDirective 触发 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>

有谁知道如何从组件中关闭工具提示？组件中的 elm 如下所示：

@ViewChild('tooltip') elm: TooltipDirective;

我提供了一个已配置的 Stackblitz，以测试它是否有帮助：Example

Answer 1

要手动触发它，您应该参考位于模板 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

覆盖默认行为

全局-styles.css

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

或

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

Stackblitz Example

NGX-Bootstrap - Angular - 手动关闭工具提示

NGX-Bootstrap - Angular - close tooltip manually

twitter-bootstrap

angular