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

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>

我有一个弹出框：

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

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

Show popover next to icon with Bootstrap

jquery

twitter-bootstrap

bootstrap-modal

bootstrap-4

popover