Bootstrap弹出窗口显示远程链接内容

Question

我想在某些元素上使用bootstrap弹出窗口。当鼠标悬停在该元素上时，远程URL内容将显示在弹出框中。

我发现这个建议的解决方案，如果你想使用AJAX： https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/8MtpL1vEUOU

但我认为有可能是一个更简单的方法。

有什么建议吗？

Answer 1

使用此代码：

<a href="/" class="btn btn-default btn-pop-over-element" data-container="body" data-toggle="popover" data-placement="top"> 
    Popover on top 
</a> 

<script> 

$('.btn-pop-over-element').click(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: $(this).attr('href'), 
     success: function() { 
      $('.btn-pop-over-element').popover({content: '<p>This is a test content</p>', title: 'Test Title', html :true}).popover('show');  
     } 
    }) 
}); 
</script> 

您也可以根据您的响应从Ajax调用收到更改标题和内容。您也可以根据需要更改href网址。