Add Bootstrap Tooltip: Elevate Your Website's User Experience

Bootstrap tooltip offers a powerful tool for enhancing the user experience of a website. These small pop-up boxes provide valuable information, explanations, and context when users interact with specific elements.

By implementing Bootstrap tooltip, websites can effectively guide users, improve usability, and create an engaging interface.

This article explores the process of adding a Bootstrap tooltip to elevate the user experience on your website.

I am using Bootstrap 5 in this tutorial.

Add Bootstrap Tooltip: Elevate Your Website's User Experience

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 enhances the user experience, offering valuable guidance and improving website usability. This article outlines the steps to seamlessly integrate tooltips into your website, creating an engaging interface.

Customizing tooltips to match your design captivates users with meaningful interactions, elevating your website and leaving a lasting impression.

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

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

Leave a Comment Cancel reply