Bootstrap - Skočni prozor (Popovers)

Dodavanje Popover oznaka u Bootstrap-u

Da biste kreirali popover, morate dodati atribut data-toggle="popover" u element. Dok se naslov popovera i njegov sadržaj koji bi se prikazao nakon okidanja ili aktivacije mogu specifikovati korištenjem atributa title i data-content. Evo standardne oznake za dodavanje popover dugmeta. 

<button type="button" data-toggle="popover" title="Popover title" data-content="Ovo je neki sadržaj.">
    Klikni da aktiviraš popover
</button>

Pokretanje Popovera

Pokretanje se može pokrenuti putem JavaScripta - samo pozovite popover() Bootstrap metodu sa id-om, klasom ili bilo kojim CSS selektorom potrebnog elementa u vašem JavaScript kodu. 

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Popovers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px 50px;
    }
</style>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top'
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <div class="popover-demo mb-2">
        <button type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Popover broj 1">Popover 1</button>
        <button type="button" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Popover broj 2">Popover 2</button>
        <button type="button" class="btn btn-info" data-toggle="popover" title="Popover title" data-content="Veći popover za demonstraciju maksimalne širine Bootstrap popovera.">Veliki popover</button>
        <button type="button" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="Ovo je posljednji popover!">Posljednji popover</button>
    </div>
    <p><strong>Napomena:</strong> Kliknite na dugme kako biste vidjeli/sakrili popover.</p>
</div>
</body>
</html>

Postavljanje smjerova Popovera

Možete postaviti popover da se pojavljuju na gornjoj, desnoj, donjoj i lijevoj strani elementa. 

<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Popover gore">Gore</button>
<button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover desno">Desno</button>
<button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover dole">Dole</button>
<button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="Popover lijevo">Lijevo</button>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pozicioniranje Popover-a u Bootstrap 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px 50px;
    }
</style>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>
</head>
<body>
<div class="bs-example">
    <div class="popover-demo mb-2">
        <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" title="Popover title" data-content="Popover gore">Gore</button>
        <button type="button" class="btn btn-success" data-toggle="popover" data-placement="right" title="Popover title" data-content="Popover desno">Desno</button>
        <button type="button" class="btn btn-info" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="Popover dole">Dole</button>
        <button type="button" class="btn btn-warning" data-toggle="popover" data-placement="left" title="Popover title" data-content="Popover lijevo">Lijevo</button>
    </div>
    <p><strong>Napomena:</strong> Kliknite na dugme kako biste vidjeli/sakrili popover.</p>
</div>
</body>
</html>

Pozicioniranje Popovera putem JavaScript-a

Sljedeći primjer će vam pokazati kako postaviti smjer pojavljivanja popover-a putem JavaScript. 

<script>
$(document).ready(function(){
    $(".pop-top").popover({placement : 'top'});
    $(".pop-right").popover({placement : 'right'});
    $(".pop-bottom").popover({placement : 'bottom'});
    $(".pop-left").popover({ placement : 'left'});
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Postavljanje Popovera putem JavaScript u Bootstrapa 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px 50px;
    }
</style>
<script>
$(document).ready(function(){
    $(".popover-top").popover({
        placement : 'top'
    });
    $(".popover-right").popover({
        placement : 'right'
    });
    $(".popover-bottom").popover({
        placement : 'bottom'
    });
    $(".popover-left").popover({
        placement : 'left'
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <div class="popover-demo mb-2">
        <button type="button" class="btn btn-primary popover-top" data-toggle="popover" title="Popover title" data-content="Popover gore">Gore</button>
        <button type="button" class="btn btn-success popover-right" data-toggle="popover" title="Popover title" data-content="Popover desno">Desno</button>
        <button type="button" class="btn btn-info popover-bottom" data-toggle="popover" title="Popover title" data-content="Popover dole">Dole</button>
        <button type="button" class="btn btn-warning popover-left" data-toggle="popover" title="Popover title" data-content="Popover lijevo">Lijevo</button>
    </div>
    <p><strong>Napomena:</strong> Kliknite na dugme kako biste vidjeli/sakrili popover.</p>
</div>
</body>
</html>

Skrivanje Popover-a na sljedeći klik

Prema zadanim postavkama Popover-i se ne skrivaju sve dok još jednom ne kliknete na element. Okidač fokusa možete upotrijebiti za skrivanje Popover-a prilikom sljedećeg klika korisnika. 

<a href="#" class="btn btn-primary btn-lg" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Ovo je neki sadržaj">Popover</a>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skrivanje Popover-a na sljedeći klik u Bootstrap-u 4</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
        margin: 150px 50px;
    }
</style>
<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top'
    });
});
</script>
</head>
<body>
<div class="bs-example">
    <div class="popover-demo mb-2">
        <a href="#" class="btn btn-primary" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Popover broj 1">Popover 1</a>
        <a href="#" class="btn btn-success" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Popover broj 1">Popover 2</a>
        <a href="#" class="btn btn-info" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Veći popup za demonstraciju maksimalne širine Bootstrap popover-a.">Veliki popover</a>
        <a href="#" class="btn btn-warning" data-toggle="popover" tabindex="0" data-trigger="focus" title="Popover title" data-content="Posljednji popover!">Posljednji popover</a>
    </div>
    <p><strong>Napomena:</strong> Kliknite na dugme za prikaz/skrivanje popover-a.</p>
</div>
</body>
</html>