Bootstrap Tooltip

bootstrap-tooltip.jpg

Untuk tutorial kali ini kita akan mencoba membuat sebuah tooltip, tetapi dengan menggunakan bootstrap ya.

Tooltip itu sendiri merupakan komponen grafis dalam user interface pengguna, biasanya ketika cursor atau pointer mouse kita arahkan(hover).

Tooltip dapat berupa informasi mengenai komponen yang bersangkutan. Cara ini sangat berguna ketika user ingin mengetahui, tanpa langsung masuk ke aplikasi yang bersangkutan.

Mungkin ini seperti preview atau pratinjau ya teman-teman. Mari kita coba praktekan dengan Bootstrap.

Buat sebuah file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Tooltip</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Tooltip</h1>
                <hr>
                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-1.12.0_min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('document').ready(function(){
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>
</body>
</html>

Buat aktivasinya saya coba meletakkannya di paling bawah ya, seperti ini:

<script type="text/javascript">
        $('document').ready(function(){
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>

index.html ketika kalian jalankan sudah langsung dapat di eksekusi, jangan lupa kalian harus perhatikan dalam pemanggilan aktivasinya.

bootstrap-tooltip-2.jpg

Silahkan mencoba teman-teman happy coding 🙂

 

 

Comments are closed.