You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

ToolTip



example1

In this blog post I am referring to the feature that is available with Bootstrap version 5.

Page Contents:



 


About

The feature is useful for temporarily displaying additional text whenever the user moves their mouse pointer over and on top of something, by displaying a small pop-up box that contains the text you want displayed.

For example, if you place your mouse pointer over the word here then you should see a pop-up box temporarily displayed near where the mouse pointer is at.

You can place and use as many on a web page as you like.



 


How-To Create

To create a ToolTip, add the data-bs-toggle="tooltip" attribute to an HTML element, and then use the title attribute to specify the text that you want displayed in the ToolTip.

You also need to add the following JavaScript to the Bottom of your HTML web page, after any HTML Element that has and uses a ToolTip:

 
<script>
// Initialize tooltips (place this script at the BOTTOM of your HTML Body after any HMTL Elements)
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
</script>


 


How-To Position

The default positioning a ToolTip will have will position the ToolTip to appear centered somewhere on top of the element.

However, you can use the data-bs-placement attribute to specify that the ToolTip be positioned on the top, bottom, left, or right side of the element.

For example:

 

<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Button #5">Basic</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Button #6">Primary</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Button #7">Secondary</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" title="Button #8">Success</button>


 


Example Source Code

The following is the complete source code for an example Bootstrap 5 enabled HTML web page which demonstrates how to add a TollTip to each individual Button control within a group of Button elements, showing that the Bootstrap ToolTip can be added to both Standard Buttons and Bootstrap Enhanced Buttons:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap ToolTip Example</title>

    <!-- Include Bootstrap -->
    <!-- Latest compiled CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" >
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

  </head>
  <body>
  
    <div class="container mt-3">
      <h5>Normal Buttons:</h5>
      <button type="button" data-bs-toggle="tooltip" title="Button #1">Button1</button>
      <button type="button" data-bs-toggle="tooltip" title="Button #2">Button2</button>
      <button type="button" data-bs-toggle="tooltip" title="Button #3">Button3</button>
      <button type="button" data-bs-toggle="tooltip" title="Button #4">Button4</button>
    </div>
    <br/>
	
    <div class="container mt-3">
      <h5>Bootstrap enhanced Buttons:</h5>
      <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Button #5">Basic</button>
      <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Button #6">Primary</button>
      <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Button #7">Secondary</button>
      <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" title="Button #8">Success</button>
      <button type="button" class="btn btn-info" data-bs-toggle="tooltip" title="Button #9">Info</button>
      <button type="button" class="btn btn-warning" data-bs-toggle="tooltip" title="Button #10">Warning</button>
      <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" title="Button #11">Danger</button>
      <button type="button" class="btn btn-dark" data-bs-toggle="tooltip" title="Button #12">Dark</button>
      <button type="button" class="btn btn-light" data-bs-toggle="tooltip" title="Button #13">Light</button>
      <button type="button" class="btn btn-link" data-bs-toggle="tooltip" title="Button #14">Link</button>
      <input type="button" class="btn btn-success" data-bs-toggle="tooltip" title="Button #15" value="Input">
      <input type="submit" class="btn btn-success" data-bs-toggle="tooltip" title="Button #16" value="Submit">
      <input type="reset" class="btn btn-success" data-bs-toggle="tooltip" title="Button #17" value="Reset">
    </div>
	
<script>
// Initialize tooltips (place this script at the BOTTOM of your HTML Body after any HMTL Elements)
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
</script>

  </body>
</html>



 


Preview

When you run the above example then you should see something similar to the following, and if you hover your mouse pointer over each Button element then you should see that Button's ToolTip displayed:



Click Here to open the above Preview into a new window.





Final Thoughts

Bootstrap ToolTip's can be added to any HTML element, not just Buttons. I simply used Button's here in this example, as an example.

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022