Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Hover popover with Bootstrap library

Ethan Karla 717 28 Jul 2021

How to make a hover popover with Bootstrap library?

Ask by Ethan Karla

Updated 28 Jul 2021

1 Answers

Anonymous User 03 Aug 2021

To create a hover popoverwith 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-lg btn-danger' data-bs-toggle='popover' title='Popover title' data-bs-content='And here's some amazing content. It's very engaging. Right?'>Click to toggle popover</button>

    </div>

</body>

<script>

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle='popover']'))

    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {

        return new bootstrap.Popover(popoverTriggerEl)

    })

</script>

</html>

Hope this will help you.

Happy Coding!

MindStick Training

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.