在悬停时触发bootstrap popover

时间:2015-03-28 12:53:47

标签: javascript jquery twitter-bootstrap

当我点击我的图片时,我的popover出现了。我正试着这样做,当我将鼠标悬停在图像上时,引导程序弹出显示。

当我将鼠标悬停在图像上时,我可以将鼠标悬停在图像上,而不是单击图像进行弹出式显示吗?

$(document).ready(function() {

    $('button[data-event=\'showImageDialog\']').attr('data-toggle', 'image').removeAttr('data-event');

    $(document).delegate('button[data-toggle=\'image\']', 'click', function() {
        $('#modal-image').remove();

        $.ajax({
            url: 'admin/filemanager',
            dataType: 'html',
            beforeSend: function() {
                $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                $('#button-image').prop('disabled', true);
            },
            complete: function() {
                $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
                $('#button-image').prop('disabled', false);
            },
            success: function(html) {
                $('body').append('<div id="modal-image" class="modal">' + html + '</div>');

                $('#modal-image').modal('show');
            }
        }); 
    }); 

    // File Manager

    $(document).delegate('a[data-toggle=\'image\']', 'click', function(e) {
        $('#modal-image').remove();
        e.preventDefault();

        var element = this;

        $(element).popover({
            html: true,
            placement: 'right',
            trigger: 'manual',
            content: function() {
                return '<button type="button" id="button-image" class="btn btn-primary"><i class="fa fa-pencil"></i></button>';
            }
        });

        $(element).popover('toggle');       

        $('#button-image').on('click', function() {
            $.ajax({
                url: 'admin/filemanager/?input=' + $(element).parent().find('input').attr('id') + '&element='+ $(element).attr('id'),
                dataType: 'html',
                beforeSend: function() {
                    $('#button-image i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
                    $('#button-image').prop('disabled', true);
                },
                complete: function() {
                    $('#button-image i').replaceWith('<i class="fa fa-upload"></i>');
                    $('#button-image').prop('disabled', false);
                },
                success: function(html) {
                    $('body').append('<div id="modal-image" style="" class="modal fade">' + html + '</div>');                                      
                    $('#modal-image').modal('show');
                }
            });

            $(element).popover('hide');
        });
    }); 

});

0 个答案:

没有答案