Question

我尝试使用popover https://github.com/sandywalker/webui-popover。我需要'quora'popover功能：链接应该是可点击的，但悬停应该显示带有ajax加载内容的popover。

我尝试了以下内容：

  $(function(){
    function details_in_popup(link, div_id){
      $.ajax({
          url: link,
          success: function(response){
              $('#'+div_id).html(response);
          }
      });
      return '<div id="'+ div_id +'">Loading...</div>';
    }

    $('a.user_popover').livequery(function(){
      var link = 'your_url_there';
      $(this).webuiPopover({
        content: function(data){
          var div_id =  "tmp-id-" + $.now();
          return details_in_popup(link, div_id);
        },
        placement: 'bottom',
        trigger: 'hover',
        cache: false
      });
    })
  })

Answer 1

您可以在初始化webui时按数据属性data-url或url参数添加ajax请求的网址，然后使用悬停设置trigger参数。

类似这样的事情

(function($){
    $('a.user_popover').webuiPopover({
        title:'Sample',
        placement: 'bottom',
        trigger:'hover',
        type:'async',//content type, values:'html','iframe','async'
        url: 'your_url_there'
    });
})(jQuery);

Answer 2

是的，我知道这是一个非常老的问题，但我正在回答，因为我认为它可以帮助其他人。

以下内容对我有用。我使用 bootstrap 3 和webuipopover插件- v1.2.5

HTML：

<span class="glyphicon glyphicon-info-sign popup-ajax"></span>

Javascript：

$('.popup-ajax').webuiPopover({
    title: "Info",
    placement: 'top',
    height: 210,
    width: 400,
    animation: 'fade',
    html: true,
    type:'async',
    content: function(){
        var target = $(this).data('target');
        $.ajax({
            url: 'use_your_url_here',
            success: function(res){
                var html = '<p>'+res+'</p>';
                $("#"+target+" .webui-popover-content").html(html);
            },
            error: function(res){
                var error = JSON.parse(res.responseText);
                html = ['<div class="alert alert-danger" role="alert">'];
                html.push('Error:'+ error.error+'</div>');
                $("#"+target+" .webui-popover-content").html(html.join(' '));
            }
        });
    }
});

希望可以提供帮助。

如何将webui-popover与hover和ajax内容一起使用

2 个答案:

HTML：

Javascript：