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:

Example:

More Option Are:
Name type default description
animation boolean true apply a css fade transition to the tooltip
placement string|function ‘top’ how to position the tooltip – top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function default title value if title tag isn’t present
trigger string ‘hover’ how tooltip is triggered – hover | focus | manual
delay number | object 0 delay 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 }

Result
bootstrap-tooltip

Download Source Code and Live Demo Of Bootstrap tooltip

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

  • Francisco

    Thanks a lot! I was looking for a clear example on how to use this bootstrap’s component. This was very helpful