Skip to main content

Bootstrap popover stay on hover

Jadi ceritanya tadi nyari-nyari snippet buat nampilin content dari bootstrap popover dan tetep tampil apabila hover on contentnya juga, kira2 begini caranya :


        $('.pin').each(function() {
            $(this).popover({
                html: true,
                trigger: 'manual',
                placement: 'bottom',
                content: function() {
                    var data = $(this).attr('class');
                    var tooltip = data.split(" ");
                    var country = tooltip[2];
                    return $('dd.'+country).html();
                }
            }).hover(function() {
                if(isVisible & hoverAway) {
                    $('.popover').hide();
                    isVisible = false;
                    hoverAway = false;
                }
                $(this).popover('show');
                isVisible = true;
            },function() {
                hoverAway = true;
            });
        });


Intinya sih, tiap kali kita mouseover kasih flag kalo popup sudah tampil dan tiap kali mouseout kasih flag kalo kita sudah hover out dari content dan element html tempat kita hover, kemudian ketika hover di element lain, cek lagi apakah kedua flag tersebut aktif, bila iya maka sembunyikan semua popover yang aktif dan tampilkan popover yg sekarang... gak ngerti maksudnya? ya gpp, saya emang ga bakat bikin penjelasan tertulis... \(^0^)/

Comments

Popular posts from this blog

My First CSS Based Design

Akhirnya berhasil juga ane bikin css based design... sebenernya ini merupakan second attempt, setelah yang pertama GATOT(gagal total).. jadi ini merupakan usaha kedua saya... mohon kritikannya : http://www.geocities.com/ewa_y_o_o/OTemp/index.html kalo ada yang kurang bagus... mohon diberikan komentarnya... ok.. makasih yah sebelumnya.... ;) NB : - designnya masih simple banget... jadi sangat dibutuhkan komentarnya please give it a comment......

Membuat Menu Tambahan Pada phpbb

Artikel ini akan menjelaskan cara menambahkan menu pada phpbb anda, pada umumnya phpbb mempunyai tampilan seperti berikut : Tampilan diatas merupakan tampilan standard phpbb, disini saya akan menyelipkan menu tambahan pada phpbb. Berikut merupakan hasil akhirnya : Seperti yg anda lihat pada tampilan phpbb diatas sudah ditambahkan menu. Untuk bisa menambahkan menu seperti diatas, anda lakukan dengan mengedit file overall_header.tpl , yang terdapat pada folder “templates/*nama_theme*/” . Buka file overall_header.tpl menggunakan editor fav. anda, ketik kode html berikut pada file overall_header.tpl pada baris 275, tepatnya diatas tag<br /> : <!-- Mulai Tambahan_Menu --> <div id="extra_menu"> <ul> <li><a href="http://www.mercubuana-it.org" target="_blank"><img src="templates/*nama_theme*/images/menu/home.gif" alt="Home" hspa...