另一个Ajax请求后,Primefaces <p:tooltip>不会消失

Question

假设我有一些工具提示<p:dataTable>.当我更改页面dataTable和其他页面时,我在任何工具提示上移动鼠标 - 它显示出来,但是在加载另一页后工具提示永远不会消失..我试图更新它,使用p:ajax,p:remoteCommand但没有任何帮助,实际上这提出了另一个Ajax请求和工具提示也被激活了.只有整页重新加载才F5有效.

有谁遇到过这样的问题？非常感谢你的帮助!

Answer 1

如果其他人遇到这个问题，我想我找到了一个值得尝试的解决方案。就我而言，当我将鼠标悬停在命令按钮上时，会显示一个工具提示，但如果单击它，它将运行 ajax 请求并返回，更新组件并完成，但工具提示仍会保留。这就是我修复它的方法。

<p:tooltip id="saveDeleteTooltip" globalSelector="[data-tooltip]" position="top" hideEvent="mouseleave click"/>

为 hideEvent 属性提供两个事件，并且似乎可以识别并使用这两个事件。第一个用于正常的鼠标悬停，但当我单击命令按钮时，第二个会触发，它确实会像预期的那样隐藏工具提示。

Answer 2

这看起来像是一个 PrimeFaces 错误，但您可以通过 JS 隐藏分页事件上的工具提示来解决它。

<p:dataTable value="#{bean.val}" var="row" rowIndexVar="rowIndex" rows="10" paginator="true">
    <p:ajax event="page" oncomplete="hideTooltips();" />

    <p:column>
        <h:outputText id="text" value="#{row}" />
        <!--
            since p:tooltip is located inside an iterative component (p:dataTable), we can't
            just define a static widgetVar value, because there will be a widget instance for
            each iteration, and each instance must have a unique widgetVar value, so we'll
            use rowIndex to achieve that
        -->
        <p:tooltip widgetVar="textTipVar#{rowIndex}" for="text" value="Tip" />
    </p:column>
</p:dataTable>
<script>
    function hideTooltips() {
        /*
            we've defined a bunch of widgetVars with a dynamic name, so we'll iterate over
            all widgets on the page and find the ones we need by looking for a known
            widgetVar prefix
        */
        for (var w in PrimeFaces.widgets) {
            if (w.indexOf('textTipVar') === 0) {
                PrimeFaces.widgets[w]._hide();
            }
        }
    }
</script>

这使用了未记录的 Tooltip 小部件方法_hide，在更新到另一个 PrimeFaces 版本时请记住这一点，例如方法的名称可能会更改。该PrimeFaces.widgets对象也没有记录。

更新。正如 russellelbert 在评论中指出的那样，该方法的名称是hide从 PrimeFaces 7.0 开始的 - 没有下划线。
此外，自 PrimeFaces 10.0 起，PrimeFaces.widgets和Tooltip#hide都是记录的客户端 API 的一部分。