primefaces中工具提示文本的工具提示背景颜色更改和字体样式答案

【问题标题】：tooltip background color change and font styles of tooltip text in primefacesprimefaces中工具提示文本的工具提示背景颜色更改和字体样式
【发布时间】：2012-04-19 05:52:15
【问题描述】：

我正在尝试查看 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>

【问题讨论】：

标签： css jsf primefaces

【解决方案1】：

如果您想为所有工具提示全局设置样式，您可以使用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 用户指南中所述： Tooltip 只有.ui-tooltip 作为样式类，并使用全局蒙皮选择器设置样式，请参阅主蒙皮部分了解更多信息。

【讨论】：

【解决方案2】：

Primefaces tooltip component 具有 style 和 styleClass 属性：

更改字体颜色的快速示例：

<p:tooltip for="slide" value="Text" 
           style="color : red; background-color : yellow"/>

【讨论】：

还想知道我们是否也可以在这里使用字体样式来提供一些字体样式。请提出建议。
是的，你可以在这里使用所有的css样式。

【解决方案3】：

尝试用下面的类覆盖

.ui-tooltip .ui-tooltip-text {
    background-color: red;
    color: #fff;
}

【讨论】：