Question

我正在使用primefaces。在我的屏幕中，如果鼠标光标位于日期字段中，我必须计算并显示<p:tooltip>中的剩余天数。这该怎么做？工具提示是否有任何事件？

Answer 1

没有与p:tooltip相关的PrimeFaces事件，但您可以使用Javascript / jQuery来模拟p:tooltip的延迟加载：

<h:form id="form">
    <p:commandButton id="button" value="button" />
    <p:tooltip for="button" id="tooltip">
        <p:outputPanel id="tooltip-content-wrapper">
            <h:outputText value="#{bean.tooltipContent}"
                rendered="#{bean.tooltipVisible}" />
        </p:outputPanel>
    </p:tooltip>
    <p:remoteCommand name="loadTooltip"
        action="#{bean.loadTooltipContent}" update="tooltip-content-wrapper" />
</h:form>
<script type="text/javascript">
$("[id='form:button']").on("mouseover", function() { loadTooltip(); });
</script>

支持bean：

public class Bean
{
    private boolean tooltipVisible = false;
    private String tooltipContent = "test";

    public void loadTooltipContent()
    {
        tooltipVisible = true;
    }
}

Answer 2

<p:toolTip/>定义控制其显示（showEvent）和隐藏（hideEvent）的javascript事件，并分别默认为mouseover和mouseout。基于这两者，您在技术上可以显示您想要的内容（最好通过javascript）

如果您没有使用javascript路线，可以

在日期字段中定义title并绑定到支持bean变量

    <h:inputText id="theDate"  value="#{bean.date}" title="#{bean.daysLeft}"/>

添加工具提示

     <p:tooltip id="theToolTip" for="theDate"/>

通过输入字段上的ajax事件，更新标题并自动获取工具提示

     <h:inputText id="theDate"  value="#{bean.date}" title="#{bean.daysLefy}">
        <p:ajax event="blur" listener="#{bean.someMethodToUpdateDaysLeft}" update="theDate,theToolTip" execute="theDate"/>
     </h:inputText>

<p：tooltip>是否有任何事件？</p：tooltip>

2 个答案: