Question

我想在按钮悬停上创建一个包含动态内容的工具提示，并在其中显示数据表。经过一段谷歌搜索后，我设法让这个工作，但有一个小问题。在手动关闭和primesfaces工具提示选项似乎没有任何属性来实现类似的东西之前，我无法保持工具提示可见。

工具提示代码：

<h:panelGroup>
    <h:outputLink id="lnk" value="#">
        <h:outputText value="Sample Tooltip"/>
    </h:outputLink>
    <p:tooltip for="lnk" position="right" />
        <p:dataTable var="car" value="#{preOrderController.cars}">
            <p:column headerText="Id">
                <h:outputText value="#{car.id}" />
            </p:column>

            <p:column headerText="Year">
                <h:outputText value="#{car.name}" />
            </p:column>

        </p:dataTable>
</h:panelGroup>

工具提示工作正常，我想要做的是一旦鼠标悬停在按钮上并显示工具提示，我想让它保持可见，直到用户手动点击右上角或其他地方的关闭按钮屏幕。我没有必要使用工具提示，如果primefaces有其他东西可以用来获得类似的功能，我愿意接受建议。

Answer 1

试试这个：

<h:form onclick="PF('tooltip').hide()">

    <p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
    <p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>

</h:form>

请注意，您需要在<h:form>内单击才能隐藏工具提示

Answer 2

解决方案就在这里

<h:form>
<h:panelGrid>
    <h:panelGroup>
        <p:commandButton value="Hide" type="button" onclick="PF('tooltip').hide();"/>  
    </h:panelGroup>
    <h:panelGroup>
        <p:commandLink id="focus" value="link" onmouseover="PF('tooltip').show()"/>
 <p:tooltip value="This is a tooltip" for="focus" hideEvent="blur" widgetVar="tooltip"/>
    </h:panelGroup>
</h:panelGrid>
</h:form>

保持primefaces工具提示可见，直到手动关闭

2 个答案: