使用 Bootstrap 在图标旁边显示弹出框

Question

我有一个来自引导程序的信息图标：

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

我有一个弹出框：

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

这里是显示弹出框的 jQuery：

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

目前弹出框显示在图标上方：

如何解决这个问题，使弹出框显示在信息图标下方？

谢谢

Answer 1

根据图示的 UI，我认为您更喜欢弹出框而不是模态框。

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

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