Dynamic Bootstrap Tooltip

I was working on an angular application. There I got a requirement to show bootstrap tooltip whose content(title) change dynamically. Following is the way I generally use to show the bootstrap tooltip:

Above approach works fine. So I use this approach with dynamic data as

but this is not working. Each time “Default” is shown in the tooltip even if I change the angular variable data.


Solution of this issue is quite simple just replace “title” with “data-original-title” and code runs fine:


At the time of DOM loading the two chunks of codes (initializing the tooltip and angular stuff) runs independently and separately which can cause race condition in a complex scenario. In that case you can use the following code:


Hope this helps 🙂 .

And if you want any further information regarding software development, please click here