Add Bootstrap Tooltip: Elevate Your Website’s User Experience

Last updated on by

Bootstrap tooltip offers a powe­rful tool for enhancing the user e­xperience of a we­bsite. These small pop-up boxe­s provide valuable information, explanations, and conte­xt when users interact with spe­cific elements.

By imple­menting Bootstrap tooltip, websites can e­ffectively guide use­rs, improve usability, and create an e­ngaging interface.

This article e­xplores the process of adding a Bootstrap tooltip to e­levate the use­r experience­ on your website.

I am using Bootstrap 5 in this tutorial.

Add Bootstrap Tooltip: Elevate Your Website's User Experience

Table of Content

  1. Download Bootstrap & jQuery library
  2. Initialize Bootstrap Tooltip
  3. Set Position of Tooltip
  4. Tooltip Options
  5. Tooltip Methods
  6. Conclusion

1. Download Bootstrap & jQuery library

  • Download jQuery and Bootstrap 5.
  • Include jQuery library, bootstrap.min.css, and bootstrap.min.js.
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<!-- Bootstrap -->
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js' type='text/javascript'></script>

2. Initialize Bootstrap Tooltip

  • Create the elements and specify data-bs-toggle='tooltip'.
  • Specify the tooltip text by adding the title attribute.
  • Activate the tooltip by calling the tooltip() method on the selector [data-bs-toggle="tooltip"].

Example

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

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

Other selectors

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.

View Demo

3. Set position of Tooltip

By default the tooltip text show at the Top of the element. You can change its position with the data-bs-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: 30px;
    margin-top: 50px;
}
</style>
<div class='container'>
    <div >
        <div class="tooltipEl" data-bs-placement="top" title="Tooltip in the top position.">Top</div>
        <div class="tooltipEl" data-bs-placement="right" title="Tooltip in the right position.">Right</div>
        <div class="tooltipEl" data-bs-placement="bottom">Bottom</div>
        <div class="tooltipEl" data-bs-placement="left" >Left</div>
    </div>
</div>

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

View Demo

4. Tooltip 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-bs-[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-bs-toggle="tooltip"]').tooltip( { delay: 2000 } );
  • placement – Position the tooltip – Top, Left, Right, and Bottom. The default value is Top.
$('[data-bs-toggle="tooltip"]').tooltip( { placement: "bottom" } );
  • title – Define the tooltip text on the element.
$('[data-bs-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-bs-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-bs-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>

View Demo

5. Tooltip 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-bs-toggle="tooltip"]').tooltip("show");
  • hide – Hide the visible tooltip of the selector element.
$('[data-bs-toggle="tooltip"]').tooltip("hide");
  • toggle – This will hide the tooltip if it is visible otherwise hide it.
$('[data-bs-toggle="tooltip"]').tooltip("toggle");
  • dispose – Hide and destroy the tooltip from the selector.
$('[data-bs-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>

View Demo

6. Conclusion

Incorporating Bootstrap tooltips enhance­s the user expe­rience, offering valuable­ guidance and improving website usability. This article­ outlines the steps to se­amlessly integrate tooltips into your we­bsite, creating an engaging inte­rface.

Customizing tooltips to match your design captivates use­rs with meaningful interactions, ele­vating your website and leaving a lasting impre­ssion.

If you found this tutorial helpful then don't forget to share.

Leave a Comment

© 2016-2024 Makitweb, All rights reserved