isDisabled property in ngx-bootstrap tooltip

Question

I have implemented the tooltip of ngx-bootstrap and the tooltip is working fine in the normal scenario. But I want to display the tooltip on conditional basis.

When I include isDisabled property, I do not see the tooltip on any of the below scenario. Am I missing something?

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

(or)

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

Answer 1

You need to use the [bracket syntax] to evaluate input parameters as javascript instead of static values.

Meaning you need to do [isDisabled]="false/true"instead of isDisabled="false/true". Doing the later example will actually pass in the string 'true' or 'false'

Here is a working 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>