jsf - 是否有任何活动?

Question

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

Answer 1

没有与之相关的 PrimeFaces 事件，p:tooltip但是您可以使用 Javascrip/jQuery 来模拟 a 的延迟加载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 路线，你可以

1. 定义title日期字段并绑定到支持 bean 变量

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

2. 添加工具提示

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

3. 通过输入字段上的 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>