Popover

Put a popover in a popover facet of a button.

<tc:button label="Simple Popover" omit="true"> <f:facet name="popover"> <tc:popover label="Popover title" value="Popover content"/> </f:facet> </tc:button>Simple Popover

To assign a CSS class on the popover window use the <tc:style customClass="..."/> attribute.

In the following example, the width is changed to 600px using a CSS class. By default the width of a popover window is 276px;. It can be changed with $popover-max-width (SCSS variable when compiling a theme) or --bs-popover-max-width (CSS). See: Bootstrap Popover CSS

<tc:button label="Popover with a width of 600px" omit="true"> <f:facet name="popover"> <tc:popover label="Lorem Ipsum" value="#{popoverController.loremIpsum}"> <tc:style customClass="popover-600"/> </tc:popover> </f:facet> </tc:button>Popover with a width of 600px

HTML/XML code will be escaped by default.

Default (escape=true, sanitize=auto)

You can turn it off with the escape attribute.

Escape off (escape=false, sanitize=auto)

Although the HTML code is not escaped, the text is not colored because the code is sanitzed. "Sanitize" remove HTML/XML-Tags from a given string if not escaped. It can be configured in the tobago-config.xml. If you want to write your own sanitizer, you have to implement org.apache.myfaces.tobago.sanitizer.Sanitizer. Use sanitize=never to deactivate this.

Escape and sanitize off (escape=false, sanitize=never)