isDisabled 属性 在 ngx-bootstrap 工具提示中

isDisabled property in ngx-bootstrap tooltip

我实现了ngx-bootstrap的tooltip,正常情况下tooltip工作正常。但是我想在有条件的基础上显示工具提示。

当我包含 isDisabled 属性 时,我在以下任何情况下都看不到工具提示。我错过了什么吗?

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="true"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

(或)

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="false"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

您需要使用 [bracket syntax] 将输入参数计算为 javascript 而不是静态值。

意味着您需要 [isDisabled]="false/true" 而不是 isDisabled="false/true"。执行后面的示例实际上会传入字符串 'true' 或 'false'

这是一个有效的 PLUNKER

<div style="margin: 100px;">
  <button type="button" class="btn btn-default btn-secondary"
    tooltip="isDisable = true"
    [isDisabled]="true"
    placement="top">
    isDisable = true
  </button>
</div>
<div style="margin: 100px;">
  <button type="button" class="btn btn-default btn-secondary"
    tooltip="isDisable = false"
    [isDisabled]="false"
    placement="top">
    isDisable = false
  </button>
</div>