使用Bootstrap在图标旁边显示popover

我有一个来自bootstrap的信息图标：

我有一个popover：

 
 
 
 Wat is een snippet? X 
 
 
 Moderne e-mailorigramma's tonen behalve het subject van de mail(het onderwerp) ook een extra informatieregel. Zo wordt de context van de mail sneller duidelijk als een gebruiker zijn inbox 'scant'. Deze tekst wordt 'snippet' genoemd en is aanpasbaar op deze pagina. 
 
 
 
  

以下是用于显示popover的jQuery：

 $(document).ready(function () { $(".watiseenSnippetButton").click(function () { $('#SnippetTonen').modal('show'); $('#SnippetTonen').fadeOut('fast'); $("#SnippetTonen").removeClass("watiseenSnippetButton"); }); }); 

目前，popover显示在图标上方：

如何解决这个问题，以便弹出窗口显示在信息图标下？

谢谢

Answer 1

基于图示的用户界面，我认为你更喜欢弹出窗口而不是模态。

为了启动popover，你可以这样做：

 $(document).ready(function () { $(document).on('click', '#closeModal', function() { $(".watiseenSnippetButton").popover('hide'); }); $(".watiseenSnippetButton").popover({ 'title' : $('#SnippetTonen .popover-title').html(), 'content' : $('#SnippetTonen .popover-content').html(), 'html' : true, }); }); 

 
 info 
 
 
 
 Wat is een snippet? X 
 
 
 Moderne e-mailorigramma's tonen behalve het subject van de mail(het onderwerp) ook een extra informatieregel. Zo wordt de context van de mail sneller duidelijk als een gebruiker zijn inbox 'scant'. Deze tekst wordt 'snippet' genoemd en is aanpasbaar op deze pagina.