How to use Bootstrap tooltip

This is a simple tutorial of bootstrap tooltip example. bootstrap is very attractive library of twitter.
Twitter Bootstrap is powerful library which has included Jquery,javascript and css.
You can use bootstrap tooltip for alert message ,validation message,display information etc.You can trigger tooltip on call of tooltip() method.

Also checkout other tooltip tutorials,

Simple Steps to Create Tooltips with Bootstrap 3

First we Include js and css file of twitter library.

Now we will create html element in file for access tool tip:

and call javascript method for tooltip in page:

We also passed parameter for tool tip position and delay:


More Option Are:
animationbooleantrueapply a css fade transition to the tooltip
placementstring|function‘top’how to position the tooltip – top | bottom | left | right
selectorstringfalseIf a selector is provided, tooltip objects will be delegated to the specified targets.
titlestring | functiondefault title value if title tag isn’t present
triggerstring‘hover’how tooltip is triggered – hover | focus | manual
delaynumber | object0delay showing and hiding the tooltip (ms) – does not apply to manual trigger typeIf a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }


Download Source Code and Live Demo Of Bootstrap tooltip

 Download Source Code

Please feel free to send queries to me using below comment section.

One thought on “How to use Bootstrap tooltip

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.