Bootstrap - Opisi (Tooltips)


Kreiranje opisa (Tooltips) pomoću Bootstrap-a

Opis je mali skočni prozor koji se pojavljuje kada korisnik postavi pokazivač miša na element, poput veze ili dugmeta, kako bi dao nagovještaj ili informacije o elementu. Opisi mogu biti od velike pomoći novim posjetiteljima vaše web stranice, jer omogućavaju korisniku da zna svrhu ikona ili veza postavljanjem pokazivača miša preko njih. Da biste kreirali opis, morate dodati atribut data-toggle="tooltip" u element. Tekst naljepnice koji bi se prikazao, može se navesti pomoću atributa title . Evo standardnog označavanja za dodavanje tolltip na hipervezu (link).

<a href="#" data-toggle="tooltip" title="Neki tekst">Detaljnije</a>

Slično možete dodati opis i drugim elementima, poput dugmadi, ikonama itd.



Pokretanje opisa

Opisi se mogu pokrenuti putem JavaScripta - samo pozovite tooltip() Bootstrap metodu sa id-om, klasom ili bilo kojim CSS selektorom ciljnog elementa u vašem JavaScript kodu. Opise alata možete pokrenuti pojedinačno ili sve odjednom. Sljedeći jQuery kod će inicijalizovati sve opise alata na stranici odabirom prema njihovom atributu za promjenu podataka.

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</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 Tooltip</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: 100px 60px;
    }
</style>
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
</head>
<body>
<div class="bs-example"> 
    <ul class="list-inline">
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" title="Lajkuj nas na Facebook">Facebook</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" title="Prati nas na Instagramu">Instagram</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" title="Subscribe na naš YouTube kanal.">YouTube</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" title="Prati nas na LinkedIn-u!">LinkedIn</a>
        </li>
    </ul>
</div>
</body>
</html>


Postavljanje smjerova opisa

Možete postaviti opise da se pojavljuju na gornjoj, desnoj, donjoj i lijevoj strani elementa. Sljedeći primjer će vam pokazati kako postaviti smjer opisa pomoću atributa podataka (Data Attributes).

<a href="#" data-toggle="tooltip" data-placement="top" title="Opis gore">Opis gore</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Opis desno">Opis desno</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Opis dole">Opis dole</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Opis lijevo">Opis lijevo</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>Položaj opisa preko atributa podataka 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: 100px 60px;
    }
</style>
<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
</script>
</head>
<body>
<div class="bs-example"> 
    <ul class="list-inline">
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" data-placement="top" title="Opis gore">Opis gore</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" data-placement="right" title="Opis desno">Opis desno</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Opis dole">Opis dole</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" data-placement="left" title="Opis lijevo">Opis lijevo</a>
        </li>
    </ul>
</div>
</body>
</html>

Sljedeći primjer će vam pokazati kako postaviti smjer opisa putem JavaScript.

<script>
$(document).ready(function(){
    $(".tip-top").tooltip({placement : 'top'});
    $(".tip-right").tooltip({placement : 'right'});
    $(".tip-bottom").tooltip({placement : 'bottom'});
    $(".tip-left").tooltip({ 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>Položaj opisa putem JavaScript 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: 100px 60px;
    }
</style>
<script>
$(document).ready(function(){
    $(".tip-top").tooltip({
        placement : 'top'
    });
    $(".tip-right").tooltip({
        placement : 'right'
    });
    $(".tip-bottom").tooltip({
        placement : 'bottom'
    });
    $(".tip-left").tooltip({
        placement : 'left'
    });
});
</script>
</head>
<body>
<div class="bs-example"> 
    <ul class="list-inline">
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" class="tip-top" title="Opis je gore">Opis gore</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" class="tip-right" title="Opis je desno">Opis desno</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" class="tip-bottom" title="Opis je dole">Opis dole</a>
        </li>
        <li class="list-inline-item">
            <a href="#" data-toggle="tooltip" class="tip-left" title="Opis je lijevo">Opis lijevo</a>
        </li>
    </ul>
</div>
</body>
</html>