Add tooltip to the element with Bootstrap

Bootstrap provides dozens of custom plugins that helps to create better UI. With this, you can easily add tooltip to the HTML elements.

A tooltip will appear when the user moves the mouse pointer over the element e.g. link, buttons, etc. This gives hint or quick information to the user.

It is helpful for the new visitor to the website to understand the advanced UI and functionality.

Add tooltip to the element with Bootstrap


Contents

  1. Download
  2. Initialize
  3. Set Position
  4. Options
  5. Methods
  6. Conclusion

 

1. Download

  • Download jQuery and Bootstrap.
  • Add jQuery library, bootstrap.min.css, and bootstrap.min.js at the <head>.
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

 

2. Initialize

  • Create the elements and specify data-toggle='tooltip'.
  • Add title attribute on which specify your tooltip text.
  • Call tooltip() method on [data-toggle='tooltip'] selector.

Example

<div class='container' style='margin-top: 100px;'>
 <a href="#" data-toggle="tooltip" title="Tooltip text">Hover me</a>
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 // Initialize
 $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Other selector

It is not mandatory that to add tooltip you have to always define data-toggle='tooltip' on the elements. You can either use any other selectors.

Example

<div class='container' style='margin-top: 100px;'>
 <a href="#" class='tooltipEl' title="Tooltip text">Hover me</a>
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 // Initialize
 $('.tooltipEl').tooltip(); 
});
</script>

Both of the above examples will generate the same output.

Demo

Hover over the link.


 

3. Set position

By default the tooltip text show at the Top of the element. You can change its position with the data-placement attribute.

Which takes – top, bottom, left, and right value.

Example

Created <div> container with different-different tooltip positions. In the script, I used title option to add tooltip text if title attribute not defined in the element.

<style>
.tooltipEl{
 float: left;
 margin-right: 10px;
 margin-top: 50px;
}
</style>
<div class='container'>
 <div >
  <div class="tooltipEl" data-placement="top" title="Tooltip in the top position.">Top</div>
  <div class="tooltipEl" data-placement="right" title="Tooltip in the right position.">Right</div>
  <div class="tooltipEl" data-placement="bottom">Bottom</div>
  <div class="tooltipEl" data-placement="left" >Left</div>
 </div>
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 $('.tooltipEl').tooltip({title: "Tooltip Text." });
});
</script>

Demo


 

4. Options

You can either specify options using data attribute or with a tooltip() method.

Syntax – With data attribute

Specify option-name after data in the element.

<div data-[option-name]="value" ></div>

Syntax – With tooltip()

$(selector).tooltip({ option-name: value });

Here, are some options –

  • delay – It takes value in milliseconds and set delay while tooltip hide or show. Its default value is 0.
$('[data-toggle="tooltip"]').tooltip( { delay: 2000 } );
  • placement – Position the tooltip – Top, Left, Right, and Bottom. The default value is Top.
$('[data-toggle="tooltip"]').tooltip( { placement: "bottom" } );
  • title – Define the tooltip text on the element.
$('[data-toggle="tooltip"]').tooltip( { title: "Tooltip text." } );
  • trigger – When tooltip will trigger – click | hover | focus | manual. You can pass multiple events separated by space. But manual doesn’t work with other triggers. The default value is "hover focus".
$('[data-toggle="tooltip"]').tooltip( { trigger: "click" } );
  • html – This takes a boolean value and allows to show HTML text in the tooltip. The default value is false.
$('[data-toggle="tooltip"]').tooltip( { html: true } );

Example

<style>
 .tooltipEl{
 float: left;
 margin-right: 10px;
 margin-top: 50px;
 }
</style>
<div class='container'>
 <div >
  <div class="tooltipEl" title="Tooltip Text">Click the text</div>
  <div class="tooltipEl" >Click the text</div>
 </div>
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 $('.tooltipEl').tooltip({
  delay: 500,
  placement: "bottom",
  title: "<span style='color: yellow;'>Tooltip</span> Text.",
  html: true,
  trigger: "click"
 }); 
});
</script>

Output

Click on the text to show and hide the tooltip.


 

5. Methods

Syntax –

$( selector ).tooltip( method-name );

Here, are some methods –

  • show – Display tooltip of the selector.If the title is not defined then it tooltip will not visible on the screen.
$('[data-toggle="tooltip"]').tooltip("show");
  • hide – Hide the visible tooltip of the selector element.
$('[data-toggle="tooltip"]').tooltip("hide");
  • toggle – This will hide the tooltip if it is visible otherwise hide it.
$('[data-toggle="tooltip"]').tooltip("toggle");
  • dispose – Hide and destroy the tooltip from the selector.
$('[data-toggle="tooltip"]').tooltip("dispose");

Example

<style>
.tooltipEl{
 float: left;
 margin-right: 10px;
 margin-top: 50px;
}
</style>
<div class='container'>
 <div >
  <div class="tooltipEl" title="Tooltip text.">Hover text</div> 
 </div>
 <br>
 <div style='margin-top: 70px;'>
  <input type='button' value='Show' id='but_show' >&nbsp;
  <input type='button' value='Hide' id='but_hide' >&nbsp;
  <input type='button' value='Toggle' id='but_toggle' >
 </div>
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){

 // Initialize
 $('.tooltipEl').tooltip();

 // Show
 $('#but_show').click(function(){
  $('.tooltipEl').tooltip('show');
 });

 // Hide
 $('#but_hide').click(function(){
  $('.tooltipEl').tooltip('hide');
 });

 // Toggle
 $('#but_toggle').click(function(){
  $('.tooltipEl').tooltip('toggle');
 });
 
});
</script>

Output


 

6. Conclusion

Use title attribute or option to add tolltip text and initiate the element by calling tooltip() method.

This does not work on the hidden elements or if title text is not specified. Use methods to manually control the tooltip.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *