---
title: "Tooltip with Bootstrap library"  
description: "Tooltip with Bootstrap library"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156624/tooltip-with-bootstrap-library  
category: "bootstrap"  
tags: ["bootstrap", "tools"]  
reading_time: 2 minutes  

---

# Tooltip with Bootstrap library

How to make a [tooltip](https://www.mindstick.com/articles/1529/simple-tooltip-using-html-css) with [Bootstrap library](https://answers.mindstick.com/qa/93859/how-to-make-a-button-groups-in-bootstrap-with-dropdown-menu-with-help-of-bootstrap-library)?

## Replies

### Reply by Anonymous User

To create a tooltip with [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) [library](https://www.mindstick.com/forum/34615/software-framework-vs-library) see the below example:

```
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <title>Bootstrap Dropdown</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</head>
<body>
    <div class='container my-5'>
        <button type='button' class='btn btn-primary' data-bs-toggle='tooltip' data-bs-placement='top' title='Tooltip on top'>
            Tooltip on top
        </button>
        <button type='button' class='btn btn-warning' data-bs-toggle='tooltip' data-bs-placement='right' title='Tooltip on right'>
            Tooltip on right
        </button>
        <button type='button' class='btn btn-success' data-bs-toggle='tooltip' data-bs-placement='bottom' title='Tooltip on bottom'>
            Tooltip on bottom
        </button>
        <button type='button' class='btn btn-danger' data-bs-toggle='tooltip' data-bs-placement='left' title='Tooltip on left'>
            Tooltip on left
        </button>
    </div>
</body>
<script>var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle='tooltip']'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })</script>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156624/tooltip-with-bootstrap-library

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
