Prev Page
Next Page  
Bootstrap Tooltip
A bootstrap tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

Via data attributes : To add a tooltip, add data-toggle = "tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip.

<a href="#" data-toggle="tooltip" title="Sample tooltip"> Mouse Hover over </a>

Via JavaScript : Trigger the tooltip via JavaScript :

$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Default Tooltip
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tooltip</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <div style="padding:50px 10px 20px;">
     <button type="button" class="btn btn-default" data-toggle="tooltip" title="Bootstrap Default Tooltip">
       Default Tooltip
    </button>
    </div>
    
</div>
 
<script type="text/javascript">
   $(function () { 
   $("[data-toggle = 'tooltip']").tooltip(); 
   });
</script>
 
</body>
</html>
Output :
Bootstrap Tooltip Directions
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tooltip Directions</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
    <div style="padding:50px 10px 20px;">
    
     <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Bootstrap Top Tooltip">
       Top Tooltip
     </button>
     <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Bootstrap Right Tooltip">
       Right Tooltip
     </button>
     <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Bootstrap Bottom Tooltip">
       Bottom Tooltip
     </button>
     <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Bootstrap Left Tooltip">
       Left Tooltip
     </button>
     
    </div>
    
    <div style="padding:50px 10px 20px;">
    
        <ul class="list-inline">
            <li><a href="#" data-toggle="tooltip" data-placement="top" title="Bootstrap Top Tooltip">Top Tooltip</a></li>
            <li><a href="#" data-toggle="tooltip" data-placement="right" title="Bootstrap Right Tooltip">Right Tooltip</a></li>
            <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Bootstrap Bottom Tooltip">Bottom Tooltip</a></li>
            <li><a href="#" data-toggle="tooltip" data-placement="left" title="Bootstrap Left Tooltip">Left Tooltip</a></li>
        </ul>
        
    </div>
    
</div>
 
<script type="text/javascript">
   $(function () { 
   $("[data-toggle = 'tooltip']").tooltip(); 
   });
</script>
 
</body>
</html>
Output :
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the tooltip.
html boolean false Insert html into the tooltip. If false, jQuery's text() method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement string | function 'top'

Sets the position of the tooltip — top | bottom | left | right | auto. When "auto" value is specified, it will dynamically reorient the tooltip.

For example, if placement value is "auto top", the tooltip will display on the top when possible, otherwise it will display on the bottom.
selector string false If a selector is provided, tooltip objects will be attached to the specified targets.
title string | function '' Sets the default title value if title attribute isn't present.
trigger string 'hover focus' Specify how tooltip is triggered — click | hover | focus | manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay number | object 0

Time to delay in showing and hiding the tooltip (ms) — does not apply to manual trigger type.

If a number is supplied, delay is applied to both hide/show Object structure is:
delay: { show: 500, hide: 100 }
container string | false false Appends the tooltip to a specific element container: 'body'
template string

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow.

The outermost wrapper element should have the .tooltip class.
viewport string | object { selector: 'body', padding: 0 } Keeps the tooltip within the bounds of this element. Example: viewport: '#viewport' or { selector: '#viewport', padding: 0 }
Methods
The bootstrap tooltip methods are following :
Method Description Example

.tooltip(options)

 Attaches a tooltip handler to an element collection.
$().tooltip(options)

.tooltip('toggle')

 Toggles an element's tooltip.
$('#element').tooltip('toggle')

.tooltip('show')

 Reveals an element's tooltip.
$('#element').tooltip('show')

.tooltip('hide')

 Hides an element's tooltip.
$('#element').tooltip('hide')

.tooltip('destroy')

 Hides and destroys an element's tooltip.
$('#element').tooltip('destroy')
Events
Bootstrap tooltip events are following :
Event Description
show.bs.tooltip This event fires immediately when the show instance method is called.
shown.bs.tooltip This event is fired when the tooltip has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.tooltip This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip This event is fired when the tooltip has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.
inserted.bs.tooltip This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.
Example :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Bootstrap Tooltip Events</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
 
   <div style="margin:50px 20px 0px;">
   
    <p>Best Educational website is <a class="tooltip-show" data-toggl ="tooltip"
    title="Free Time Learning">www.freetimelearning.com </a>.</p>
   
   </div>
 
<script type="text/javascript">
   $(function (){
  $('.tooltip-show').tooltip('show');
   });
   
   $(function (){
  $('.tooltip-show').on('show.bs.tooltip', function () {
       alert("Alert message on show");
     })
   });
</script>
 
</body>
</html>
Output :
  Prev Page
Next Page