gpt4 book ai didi

css - 工具提示背景颜色变化和工具提示文本在 primefaces 中的字体样式

转载 作者:行者123 更新时间:2023-12-04 21:19:29 24 4
gpt4 key购买 nike

我正在尝试查看 prime-faces 中的一些功能可用性......我想知道在 prime-faces 的工具提示中是否有任何字体样式和背景颜色更改功能可用...

请告诉我。

这里是示例代码:

<?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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">

<h:head>
<title>Tool Tip Customization</title>
</h:head>
<h:body>

<h:panelGrid columns="3" cellpadding="5">

<h:outputText value="Focus/Blur: " />
<p:inputText id="focus" title="This tooltip is displayed when input gets the focus"/>
<p:tooltip for="focus" showEvent="focus" hideEvent="blur" />

<h:outputText value="Fade: " />
<h:outputLink id="fade" value="#">
<h:outputText value="Fade Effect" />
</h:outputLink>
<p:tooltip for="fade" value="Fade effect is used by default" showEffect="fade" hideEffect="fade" />

<h:outputText value="Slide: " />
<h:outputLink id="slide" value="#">
<h:outputText value="Slide Effect" />
</h:outputLink>
<p:tooltip for="slide" value="This tooltip uses slide effect for the animation" showEffect="slide" hideEffect="slide" />

<h:outputText value="Clip/Explode: " />
<h:outputLink id="grow" value="#">
<h:outputText value="Clip/Explode Effects" />
</h:outputLink>
<p:tooltip for="grow" value="This tooltip uses clip/explode effects for the animation" showEffect="clip" hideEffect="explode" />

<h:outputText value="Content: " />
<h:outputLink id="lnk" value="#">
<h:outputText value="PrimeFaces Users" />
</h:outputLink>
<p:tooltip for="lnk">
<p:graphicImage value="C:\raman\AMAP\POC\primefaces\JSF2.0HelloWorld\WebContent\images\Users.gif" />
</p:tooltip>

</h:panelGrid>
</h:body>
</html>

最佳答案

如果你想为所有工具提示全局设置样式,你可以使用类ui-tooltip。例如像这样:

.ui-tooltip {
border: 1px solid #ccc;
box-shadow: 0 0 10px 0 #ddd;
-moz-box-shadow: 0 0 10px 0 #ddd;
-webkit-box-shadow: 0 0 10px 0 #ddd;
color: #666;
background: #f8f8f8;
}

如 PrimeFaces 用户指南中所述:工具提示只有 .ui-tooltip 作为样式类,并使用全局外观选择器设置样式,请参阅主要外观部分了解更多信息。

关于css - 工具提示背景颜色变化和工具提示文本在 primefaces 中的字体样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10222366/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com