Cara Membuat Tooltip dengan Bootstrap

Publish Date : 28-04-2016 , dibaca 5830 kali, Hari ini dibaca : 1 kali ,0 comments

Pada artikel sebelumnya kita sudah membahas beberapa tutorial bootstrap, salah satunya Membuat Modal Bootstrap , Kali ini admin suckittrrees.com akan menjelaskan cara membuat Tooltip dengan Bootstrap, Sudah tau apa itu tooltip...? berikut gambarnya dibagian bawah artikel agar lebih jelas lagi..

Cara Membuat Tooltip Dengan BOOTSTRAP

Kalian pasti pada tau kan apa itu tooltip ? Ya. Tooltip adalah sebuah dialog kecil yang muncul ketika pointer mouse di arahkan ke sebuah elemen atau biasa di sebut ( Hover ).
Oke langsung saja di simak tutorial Cara Membuat Tooltip Dengan BOOTSTRAP

1. Membuat File HTML
seperti biasa silahkan anda siapkan file HTML bernama index.html, lalu ketikkan script berikut ini .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Bootstrap 4 Tooltip Placement</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  
<script type="text/javascript">
$(document).ready(function(){
    $(".tip-top").tooltip({
        placement : 'top'
    });
    $(".tip-right").tooltip({
        placement : 'right'
    });
    $(".tip-bottom").tooltip({
        placement : 'bottom'
    });
    $(".tip-left").tooltip({
        placement : 'left'
    });
});
</script>
<style type="text/css">
    .bs-example{
        margin:100px auto;
        width:400px;      
    }
</style>
</head>
<body>
<div class="bs-example"> 
    <ul class="tooltip-examples list-inline">
        <li><a href="#" data-toggle="tooltip" class="tip-top" data-original-title="Default tooltip">Tooltip</a></li>
        <li><a href="#" data-toggle="tooltip" class="tip-right" data-original-title="Right tooltip">Another tooltip</a></li>
        <li><a href="#" data-toggle="tooltip" class="tip-bottom" data-original-title="A much longer tooltip to demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a></li>
        <li><a href="#" data-toggle="tooltip" class="tip-left" data-original-title="The last tip!">Last tooltip</a></li>
    </ul>
</div>
</body>
</html>

Coba deh anda jalankan file htmlnya dan anda lihat apa yang terjadi di browser anda :D...Bagaimana, mudah bukan :D ..Silahkan anda coba dan kembangkan sesuka hati anda :D...mungkin itu dulu yang dapat saya sampaikan, :) ..semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D dan silahkan download file nya dibawah ini

Membuat Form Login Responsive Dengan Bootstrap
Previous Post

Merubah Warna Tooltip di Bootstrap
Next Post