Tooltip Options - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Tooltip

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Tooltip

Introduction

There are certain options which may be passed to tooltip() Bootstrap method to customize the functionality of the tooltip plugin.

Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the tooltip.
html boolean false Insert html into the tooltip.
placement string | function 'top' Sets the position of the tooltip: top | bottom | left | right | auto.
selector stringfalse 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.
delay number | object 0 Time to delay in showing and hiding the tooltip (ms) : does not apply to manual trigger type.
container string | falsefalse 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.
viewport string | object { selector: 'body', padding: 0 } Keeps the tooltip within the bounds of this element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Setting Title for Bootstrap 3 Tooltips</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
    $("#myTooltips a").tooltip({
        title : 'It works in absence of title attribute.'
    });<!--   w w  w.  jav a  2s.  c om-->
});
</script>
  <style type="text/css">
    .a{
        margin: 25px;
        font-size: 24px;
    }
</style>
 </head>
 <body>
  <div>
   <div id="myTooltips">
    <a href="#" data-toggle="tooltip" title="Edit Document"><span class="glyphicon glyphicon-edit"></span></a>
    <a href="#" data-toggle="tooltip" title="Save Document"><span class="glyphicon glyphicon-floppy-disk"></span></a>
    <a href="#" data-toggle="tooltip" title="Download Document"><span class="glyphicon glyphicon-download-alt"></span></a>
    <a href="#" data-toggle="tooltip" title="Print Document"><span class="glyphicon glyphicon-print"></span></a>
    <a href="#" data-toggle="tooltip" title="Delete Document"><span class="glyphicon glyphicon-trash"></span></a>
    <a href="#" data-toggle="tooltip" title="Settings"><span class="glyphicon glyphicon-cog"></span></a>
   </div>
   <br>
   <p><strong>Note:</strong> Remove the title attribute form any link and place the mouse pointer over it to see the result.</p>
  </div>
 </body>
</html>

Related Tutorials