Tooltip with Bootstrap library

Ethan Karla 705 28 Jul 2021

How to make a tooltip with Bootstrap library?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 03 Aug 2021

To create a tooltip with Bootstrap 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!

forum

Tooltip with Bootstrap library

Can you answer this question?

1 Answers