Henrique: Popover no Bootstrap com HTML

07/12/2022

Popover no Bootstrap com HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="5">
    <title>Bootstrap - Popover</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
    crossorigin="anonymous"> 

</head>
<body class="container mt-5">

    <button type="button" class="btn btn-lg btn-danger"
    data-bs-toggle="popover"
    title="Popover título"
    data-bs-content="Conteúdo do popover">
    Ver modal agora</button><br><br>

    <button type="button" class="btn btn-lg btn-danger"
    data-bs-toggle="popover"
    title="Popover título"
    data-bs-content="Conteúdo do popover"
    data-bs-placement="right">Ver modal agora</button>

    <br><br><button type="button" class="btn btn-secondary" 
    data-bs-container="body" data-bs-toggle="popover" 
    data-bs-placement="top" data-bs-content="Top popover">
    Popover no topo
    </button><br><br>
    
    <button type="button" class="btn btn-secondary" 
    data-bs-container="body" data-bs-toggle="popover" 
    data-bs-placement="bottom" data-bs-content="Bottom popover">
    Popover abaixo
    </button><br><br>

    <button type="button" class="btn btn-secondary" 
    data-bs-toggle="popover" 
    data-bs-placement="right"
    title="Ajuda">
    Popover na esquerda
    </button>

    <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
    crossorigin="anonymous">
    </script>

    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
</body>
</html>