使用Bootstrap在图标旁边显示popover

Question

我有一个来自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>

我有一个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>

这是用于显示popover的jQuery：

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

目前，弹出窗口显示在图标上方：

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

谢谢

Answer 1

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

为了启动弹出窗口，您可以执行以下操作：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;