Bootstrap Tooltips Simple Demo

July 17, 2014

Bootstrap Tooltip is a very easy way to implement pop-up tooltips and is very useful in adding tooltip help to both buttons and text. You can even mark up the text in your external data for on-screen dispay.

My demo is here and the code for that is shown below.

<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" 
  rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<title>Bootstrap Dialog Test</title>

<style>
.ttip{ 
  border-bottom: 1px dotted purple; 
  color: purple;
   text-decoration: none;
}
.ttip:hover{ 
  color: lightsteelblue;  
}
</style>

</head>
<body>
  
  <div style="padding:30px;height:350px;">

  <h3>Bootstrap ToolTip Demo</h3>
  
  <p>The button does nothing but hover over it to get tooltip help</p>
  
  <p><button type="button" class="btn btn-success" data-toggle="tooltip" 
     title="Don't bother clicking this">Demo Button</button></p>
  
  <p>Hover over the highlighted word:</p>
  
  <p>The main characters are <a class="ttip" title="" data-toggle="tooltip" 
     href="#" data-original-title="Hobbits are small people with hairy feet and 
       live in Hobbiton">Hobbits</a> in the JRR Tolkien book "The Lord of the Rings".
  </p>  
 
  </div>
  
<script>
 $(document).ready(function() {
   
  // set all tooltips to be displayed at TOP
  $('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

 });
</script>
</body>
</html>

There’s a few other things that you can do, like positioning top, bottom, right or left, and you have a little bit of control over the tooltip from jQuery. You don’t really need much. Add some CSS so that your words with tooltips really stand out.

My advice is don’t overuse them. Your site needs to be consistent, so if you put a tooltip on one button then the user will expect it to be on all buttons, sitewide. Users don’t like text popping up everywhere; you don’t need to explain every word or item on your page. Used well, tooltips can really help and give a great UX.

For more information and examples visit getbootstrap.com/javascript/.