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:

Test Tooltip

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'