Ada yg sudah tau apa itu Modal Bootstrap? bukan, bukan berbentuk uang untuk buka usaha.
Modal bootstrap adalah kotak dialog yg muncul ketika di klik, untuk lebih lanjut silahkan lihat di dokumentasi dari Bootstrap sendiri, modal.


Lah kalo Tooltip Bootstrap apaan ya? tooltip adalah custom dari title tau kan fungsi title di html kek gimana? nah ini di kosum dari bootstrap hingga memiliki tampilan menarik, saat kursor kita berada di objek tersebut maka akan muncul sesuatu, seperti ini tooltip
Sebenarnya kalo kita ngikutin dokumentasi dari getbootstrap.com udah bisa jalan, tapi masalahnya adalah kalo kita ingin menampilkan keduanya dalam 1 objek pasti selalu gagal, kenapa? itu karna mereka tidak dapat mengeksekusi tooltip dan modal secara bersamaan. Contoh saja pada aplikasi CRUD(Create Read Update Delete) yang kita buat ada fitur untuk mengedit data, agar fleksibel untuk fungsi Edit kita buat dengan menggunakan Modal.
Sekarang kita mulai, untuk gambarannya silahkan lihat demonya di INI DEMO
Untuk kebutuhannya css dari bootstrap, library jQuery, dan library js dari bootstrap.
ini script untuk kotak dialog modal, detailnya silahkan lihat di modal. atau seperti script dibawah ini:
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"> Modal title</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="simpan btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- ./Modal -->
Diatas adalah script untuk bagian modal

<table class="table"> <tr> <th>Nama</th> <th>Alamat</th> <th>Aksi</th> </tr> <tr> <td>1</td> <td>asdsad</td> <td><a href="#" class="edit-record" data-id="1" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Show</a></td> </tr> </table>
diatas adalah syntax untuk menampilkan tabel beserta action nya. perhatikan syntax yang berada di dalam tag <a>
ada syntax class="edit-record" dan data-id="1" yang berarti dia akan mengambil data yang memiliki id = 1.
sedangkan data-toggle dan data-placement merupakan syntax untuk menampilkan tooltip, jelasnya silahkan baca dokumen tootlip.

<script> $(function(){ $(document).on('click','.edit-record',function(e){ e.preventDefault(); $("#myModal").modal('show'); $.post('hasil.php', {id:$(this).attr('data-id')}, function(html){ $(".modal-body").html(html); } ); }); }); $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>
Untuk menampilkan modal, kita memerlukan bantuan dari jQuery, perhatikan pada bagian tag <a> yang ada di dalam tabel, jika kita meng-klik object yang memiliki class EDIT_RECORD maka selanjutnya akan menampilkan modal dialog. kemudian konten dari modal dialog tersebut berasal dari file hasil.php.
Berikut konten yang ada di hasil.php
Ambil dari database yang idnya = <?php echo $_POST['id']; ?>

Yaps, selesai. perlu diperhatikan kita harus meload css bootstrap, js bootstrap, dan js dari jQuery.

Jika anda memiliki alternatif lain mari kita diskusikan di kolom komentar.