anzeigen popover mit Bootstrap neben Symbol

Question

Ich habe ein Informationssymbol aus Bootstrap:

<div class="input-group-addon border-0 bg-white" id="snippet"> 
    <span style="cursor:pointer;" class="fa fa-info-circle watiseenSnippetButton" aria-hidden="true"></span> 
</div> 

Und ich habe eine popover:

<div id="SnippetTonen" class="popover right ui-content " data-shadow="false"> 
    <div class="arrow"></div> 
    <h3 class="popover-title"> 
     Wat is een snippet? 
     <a class="popover-close" id="closeModal">X</a> 
    </h3> 
    <div class="popover-content"> 
     <p> 
      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. 
     </p> 
    </div> 
    <div class="popover-footer"> 
    </div> 
</div> 

Und hier ist die jQuery zur Darstellung des popover:

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

Momentan wird das Popover über dem Symbol angezeigt:

Wie dieses Problem zu beheben, so dass der popover unter dem Informationssymbol angezeigt wird?

Danke

Answer 1

Basierend auf dem Bild UI, ich glaube, Sie mehr in popovers sind als Modalverben.

Um die popover zu feuern, könnten Sie so etwas tun:

$(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, 
 
    }); 
 
});

<div class="input-group-addon border-0 bg-white" id="snippet"> 
 
    <span style="cursor:pointer;" data-toggle="popover" class="fa fa-info-circle watiseenSnippetButton" aria-hidden="true">info</span> 
 
</div> 
 

 

 
<div id="SnippetTonen" class="popover right ui-content " data-shadow="false"> 
 
    <div class="arrow"></div> 
 
    <h3 class="popover-title"> 
 
     Wat is een snippet? 
 
     <a class="popover-close" id="closeModal">X</a> 
 
    </h3> 
 
    <div class="popover-content"> 
 
     <p> 
 
      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. 
 
     </p> 
 
    </div> 
 
    <div class="popover-footer"> 
 
    </div> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>