[英]Can I show tooltip for a disabled command button in primefaces?
在primefaces中是否有一个功能可以显示禁用的commandButton的工具提示。
如果您找不到在禁用按钮上显示工具提示的方法,您可以随时尝试用一些包裹它
<h:panelGroup></h:panelGroup>
将变成span
或与
<h:panelGroup layout="block"></h:panelGroup>
将变成div
并尝试将工具提示应用于包装器...
在这个问题中解释了@Kukeltje 为什么工具提示在禁用的 commandButton 上不起作用: PrimeFaces 6.2 commandButton title not working when commandbutton is disabled
如果其 disabled 属性设置为 true,则类.ui-state.disabled
将添加到按钮中:
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
为了无论如何显示工具提示,您可以创建如下内容:
<p:commandButton id="testButton" disabled="true"
action="yourAction" styleClass="showTooltip" value="Click me!" />
在您的 css 文件中添加以下规则:
.ui-state-disabled.showTooltip{
pointer-events: all;
}
如果元素同时具有ui-state-disabled
和showTooltip
,则无论如何都会显示工具提示。
我想扩展丹尼尔的回答。 您需要在禁用的按钮上插入覆盖块并在其上应用工具提示。 h:panelGroup 中的简单包装按钮不会有太大帮助。
<h:panelGroup styleClass="display: inline-block; position: relative;">
<p:commandButton disabled="#{controller.isDisabled()}" ... />
<h:panelGroup styleClass="display: block; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px;"
rendered="#{controller.isDisabled()}"
id="disabledBtnOverlay" />
</h:panelGroup>
<p:tooltip for="disabledBtnOverlay" rendered="#{controller.isDisabled()}" />
使禁用按钮或输入文本显示工具提示的一种方法是创建全局工具提示并在输入文本或按钮中创建标题,如下所示:
<p:tooltip />
<p:inputText id="inputTextID" disabled="true" value="Your value"
title="TooltipMessage" />
虽然它不会显示任何样式,但不知道为什么
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.