使用Bootstrap在图标旁边显示弹出窗口 [英] Show popover next to icon with Bootstrap

问题描述

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

I have an information icon from 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:

And here is the jQuery for showing the popover:

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

当前弹出窗口显示在图标上方:

Currently the popover is shown above the icon:

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

How to fix this, so that the popover will be shown under the information icon?

谢谢

推荐答案

基于上图所示的UI，我认为您更喜欢弹出窗口而不是模式.

Based on the pictured UI, I think you are more into popovers than modals.

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

In order to fire up the popover, you could do something like this:

$(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在图标旁边显示弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！