这是一个小的弹出框, 显示有关事件的信息。当用户与组件交互时, 它用于向用户显示消息。它包括各种功能, 如皮肤特效, 事件和主题支持。
PrimeFaces提供<p:tooltip>组件, 以在JSF应用程序中创建信息性消息。
它还具有下表列出的各种属性。
Attribute | Default value | Type | Description |
---|---|---|---|
Value | null | Object | 用于设置组件的值。 |
showEvent | mouseover | String | 用于设置事件以显示工具提示。 |
showEffect | fade | String | 用于显示的效果。 |
hideEvent | mouseout | String | 用于设置事件以隐藏工具提示。 |
hideEffect | fade | String | 用于设置用于隐藏的效果。 |
showDelay | 150 | Integer | 它用于设置延迟时间以毫秒为单位显示工具提示。 |
hideDelay | 0 | Integer | 用于设置隐藏工具提示的延迟时间(以毫秒为单位)。 |
for | null | String | 它用于附加工具提示。 |
style | null | String | 它用于设置工具提示的内联CSS样式。 |
escape | true | Boolean | 它定义了html是否将被转义。 |
trackMouse | false | Boolean | 工具提示位置跟随鼠标移动的指针。 |
beforeShow | null | String | 它用于在显示工具提示之前执行脚本。 |
position | right | String | 用于设置工具提示的位置。 |
例子
在下面的示例中, 我们正在实现<p:tooltip>组件。本示例包含以下文件。
JSF文件
// tooltip.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Tooltip</title>
</h:head>
<h:body>
<h:panelGrid columns="3" cellpadding="8">
<h:outputText value="User Name: " />
<p:inputText id="username" title="Enter User Name" />
<p:tooltip id="toolTipFocus" for="username" showEvent="focus" hideEvent="blur" />
</h:panelGrid>
</h:body>
</html>
输出
评论前必须登录!
注册