2012-04-19 35 views
1

我想看到一些特性的可用性在primefaces ..... 我想知道是否有任何字體樣式和背景顏色變化功能可用工具提示在素面...提示的背景顏色變化和字體樣式primefaces提示文本的

請讓我知道。

這裏是示例代碼:

<?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> 

回答

3

Primefaces tooltip componentstylestyleClass屬性:

快速例如更改字體顏色:

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

謝謝Matt!這有助於! – 2012-04-19 06:45:35

+0

也想知道我們是否可以在這裏使用字體樣式,以及給一些字體樣式。請建議。 – 2012-04-19 06:46:10

+0

是的,你可以在這裏使用所有的CSS樣式。 – 2012-04-19 06:51:05

6

如果你想設置樣式所有全球工具提示,您可以使用類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 User's指南: 工具提示只有.ui-tooltip作爲一種風格類和樣式爲全球剝皮選擇,請參閱主要剝皮節以獲取更多信息。