Scribd Logo
Upload

Welcome to Scribd!

  • 9999

    Uploaded by

    nedin88414
    2 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    2 views2 pages

    9999

    Uploaded by

    nedin88414

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->


    <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"

    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">

    <title>Hello, world!</title>
    </head>
    <body>

    <div class="container bg-primary d-flex justify-content-center">


    <span id="popoverTrigger" class="d-inline-block">
    <button class="" type="button">Popover Button</button>
    </span>
    </div>

    <!-- Bootstrap Bundle with Popper -->


    <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>

    <script>
    // Initialize popover
    var popover = new
    bootstrap.Popover(document.getElementById('popoverTrigger'), {
    trigger: 'hover',
    content: function () {
    return '<div class="popover-custom-content">This is a custom styled
    popover. You can adjust its size and styling as needed.</div>';
    },
    html: true // Render content as HTML
    });
    </script>

    <style>
    /* Custom styling for popover content */
    .popover-custom-content {
    font-size: 16px;
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
    height: 100%;
    width: 100%;
    /* Additional styling as needed */
    }

    /* Custom styling for popover container */


    .popover {
    max-width: 100vw;
    height: 10vh;
    overflow: hidden;
    padding: 0px;
    }
    .popover-body {
    padding: 0; /* Remove padding */
    }
    </style>

    </body>
    </html>

    You might also like