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>

And I have a 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>

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?

Thank you

回答1:

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>

来源：https://stackoverflow.com/questions/48027281/show-popover-next-to-icon-with-bootstrap

标签

jquery

twitter-bootstrap

bootstrap-modal

bootstrap-4

popover