# Bootstrap Tooltip Trick
[SOURCE](https://github.com/twbs/bootstrap/issues/16732#issuecomment-330602172)
Bootstrap version 4.0
We want to be able to disable tooltip when it first show up.Because bootstrap assigns an event handler once clicked or focused for the first time, only in the second attempt, the event get's executed. So in order to auto dismiss upon clicking outside the tooltip for the first time, we need to manually 'click' it programmatically.
```html
<span [id]="deliveryTooltip"
tabindex="0"
data-toggle="tooltip"
data-placement="top"
data-animation="false"
data-trigger="manual"
(click)="getTooltipAndToggle()" (blur)="hideTooltip()">
<img src="assets/images/question2.svg" id="delivery-info">
</span>
```
```typescript
getTooltipAndToggle() {
this.getTooltip((response) => {
this.toggleTooltipWith(response);
});
}
private initTooltip() {
// 1. For some stupid reason document.getElementById(this.deliveryTooltip) still return null
// even in AfterViewInit, thus we need to resort to the setTimeout trick.
// 2. See: https://github.com/twbs/bootstrap/issues/16732#issuecomment-330602172
// Because bootstrap assigns an event handler once clicked or focused for the first time,
// only in the second attempt, the event get's executed. So in order to auto dismiss upon clicking outside
// the tooltip for the first time, we need to manually 'click' it programmatically.
let tip = document.getElementById(this.deliveryTooltip);
if (!tip) {
setTimeout(() => {
tip = document.getElementById(this.deliveryTooltip);
tip.click();
tip.focus();
PageNavigationUtil.scrollToTop();
}, 300);
}
}
private getTooltip(callback: (response: string) => any) {
// get transalated string programmatically
}
// replace tooltip content
private toggleTooltipWith(content: string) {
$('#' + this.deliveryTooltip).attr('data-original-title', content).tooltip('toggle');
}
hideTooltip() {
$('#' + this.deliveryTooltip).tooltip('hide');
}
```