forum

home / developersection / forums / tooltip with bootstrap library

Ask Question
Ethan Karla

Ethan Karla

Follow

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.

Can you answer this question?
Answer

1 Answers

Anonymous User

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!

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy