Tooltips- jQuery CSS Bootstrap Tooltips

Twitter Bootstrap css made it easy to create tooltips in simple steps. You can display tooltips in 4 directions left, right, top and bottom. But don't forget to include bootstrap.css and bootstrap.js file in your page. Click here to learn detail about bootstrap and download the required files.

HTML Code:

<a title="Default tooltip" rel='tooltip'>Test Tooltip</a>

Javascript Code:

<script language="javascript">
   $(document).ready(function(){
	$("[rel='tooltip']").tooltip();
    })
</script>

Output:


Set Tooltips Direction

You can set data-placement attribute as left, right, top, bottom to display tooltips in different direction. if you didn't set dataplacement then the default will be top.

HTML Code to Display Tooltip on Left:

<a title='Left Tooltip' rel='tooltip' data-placement='left' >Left Tooltip</a>

Output

Left Tooltip

HTML Code to Display Tooltip on Right:

<a title='Right Tooltip' rel='tooltip' data-placement='right'>Right Tooltip</a>

Output

Right Tooltip

HTML Code to Display Tooltip on Bottom:

<a title='Bottom Tooltip' rel='tooltip' data-placement='bottom'>
Bottom Tooltip</a>

Output

Bottom Tooltip

Enable HTML Tag in Tooltips

data-html true or false is used to enable / disable HTML tag in tooltips.
<a title='HTML Tooltip Lin1 -1 
<br/> HTML Tooltip Lin1 -2 
<br/> HTML Tooltip Lin1 -3
<br/> HTML Tooltip Lin1 -4' 
rel='tooltip' data-html='true'> HTML Tooltip</a>

Output

HTML Tooltip

Change Color of Tooltip

.changecolor + .tooltip > .tooltip-inner {
    background-color: #fff; 
    color: #000; 
    border: 1px solid #CCCCCC; 
}

.changecolor + .tooltip.top > .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #CCC
}
.changecolor + .tooltip.left > .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #CCC;
}
.changecolor + .tooltip.bottom > .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #CCC;
}
.changecolor + .tooltip.right > .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #CCC;
}

HTML Code to Display Customized:

Please note here we have added a class called changecolor to a tag. So the new design will display this tooltip only.

<a title='Customized Tooltip. Backgroung Color, Text color, 
Border color and Arrow color changed.' rel='tooltip' 
data-placement='right' data-html='true' class="changecolor">
Customized Tooltip</a>

Output

Customized Tooltip

Change the width of Tooltip

.tooltip-inner {max-width: 650px; !important; }

Options

Name Type Default Description
data-animation boolean true apply a CSS fade transition to the tooltip
data-html boolean false Use HTML tag inside the tooltip. If true you can use HTML tags.
data-placement string | function top You can use top, bottom, left, right, auto to position the tool tip.  auto will dynamically display the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.
data-selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
data-title string | function   default title value if title tag isn't present.
data-trigger string 'hover focus' how tooltip is triggered - click, hover, focus, manual. You may pass multiple triggers; separate them with a space.
delay number | object 0 delay showing and hiding the tooltip in miliseconds.
Object structure is: delay: { show: 500, hide: 100 }
container string | false false Appends the tooltip to a specific element. Example: container: 'body'


Download JS & CSS File Total Downloads: 3569

Comments
21 December
2013
Said
Excellent Blog Thanks Very Much

Said DIas
25 November
2013
Mohd Javed
but after mouse-hover on tool tip example the tool-tip popover doesn't seen simple title show.what can i do.
19 November
2013
erdal eskikoy
This bootstrap tooltip tutorial is really missing on the net. You saved me at least an hour.
Thanks a lot !

14 August
2013
Maggew
This documentation is more enhanced than TB site - thanks for the share!

http://getbootstrap.com/2.3.2/javascript.html
comments powered by Disqus