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>

有人知道如何从组件中关闭工具提示吗？组件中的榆木外观如下：

@ViewChild('tooltip') elm: TooltipDirective;

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

Answer 1

要手动触发它，您应该参考模板中button[tooltip]上的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

覆盖默认行为

global-styles.css

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

或

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

Stackblitz Example

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

1 个答案: