Question

我正在开发一个项目，我想在popover中显示一些值。但是当我尝试很多东西时，它没有正常显示。看看我的代码。我在标签中包含一些div，用于制作弹出框。它没有正常工作。

如果我将它包装在div中，那么popover不会显示。让我知道我的代码中有什么不对或给我一些建议。

https://codepen.io/awesome_designer/pen/EoazJv

<p:dataTable id="inventorytbl" value="#{inventorybean.inventoryList}"
                var="inventory" rows="15" paginator="true"
                paginatorPosition="bottom" pageLinks="5"
                paginatorAlwaysVisible="false" widgetVar="inventoryWidget"
                rowKey="#{inventory.code}"
                paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">

                <f:facet name="header">
                    <p:outputPanel>
                        <p:outputPanel>
                            <p:inputText id="globalFilter"
                                onkeyup="PF('inventoryWidget').filter()"
                                onkeypress="if (event.keyCode == 13) {return false; }"
                                style="width:150px;float: right;margin-left: 5px;"
                                placeholder=" Enter keyword" />
                        </p:outputPanel>
                    </p:outputPanel>
                </f:facet>

                <p:column headerText="Material Name" style="width:23%"
                    sortBy="#{inventory.materialName}"
                    filterBy="#{inventory.materialName}" filterMatchMode="contains"
                    filterStyle="display:none;visibility:hidden;">
                    <div title="#{inventory.materialName}">
                        #{inventory.materialName}</div>
                </p:column>
                // onfilter clearing button inside column getting disable(default to false)
                <p:column style="width: 10%;text-align: -webkit-center;"
                    headerText="Action" filterBy="#{inventory.activeFlag}"
                    filterMatchMode="contains"
                    filterStyle="display:none;visibility:hidden;">
                    <p:commandButton id="musterupdatelnk"
                        action="edit"


                        disabled="#{not inventory.activeFlag}" 
                        icon="fa fa-pencil-square-o"/>
                </p:column>

Answer 1

默认情况下，弹出窗口将显示在元素的右侧。

将属性data-toggle="popover"调整为 <div>的所有块（元素）

<div class="call-set-slot-inner pink" data-toggle="popover" data-trigger="focus" data-container="body" data-placement="right" data-html="true" id="login"></div>

使用data-trigger="focus"

数据触发=＆＃34;聚焦＆＃34;单击元素外部时将关闭弹出窗口的属性：

修改您的javascript

$("[data-toggle=popover]").click(function(){
    $(this).popover({
        html: true,
        content: function() {
        var id = $(this).attr('id');
        return $('#popover-content-' + id).html();
      }
    });
});

Answer 2

我找到了答案。

我将div包装在单个div中并给这个div提供一个popover并添加一些样式。代码如下。

<div data-toggle="popover" data-container="body" data-triger="focus" data-placement="top" data-html="true" id="login" style="width: 240px;height: 50px;float: left;">
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                <!-- </div> -->
                <!-- <div class="call-set-slot"> -->
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                <!-- </div> -->
                <!-- <div class="call-set-slot"> -->
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div class="call-set-slot-inner pink"></div>
                  <div id="popover-content-login" class="hide">
                    <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                  </div>
                </div>

Popover没有显示正确的对齐Bootstrap

2 个答案: