contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Cara Membuat Tooltip dengan Bootstrap

Posted in Tutorial Bootstrap Life at 28 April 2016 With 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

Cara Membuat Tooltip Dengan BOOTSTRAP

▼ Download Source Code Dibawah Ini ▼


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

Artikel Rekomendasi



Artikel Terkait

Diskusi