PrimeFaces Extensions Showcase

Tooltip

In shared mode a single tooltip is shared between multiple targets. Tooltip's content is shared and reduces markup. A typically example is one and the same tooltip text for each filter field in a datatable with filtering feature.

Please move mouse over filter input fields

Subject	Text	Time
subject 0	text 0	1730416075992
subject 1	text 1	1730416075987
subject 2	text 2	1730416075994
subject 3	text 3	1730416075991
subject 4	text 4	1730416075991

Source

XHTML page
Managed bean


<p:dataTable id="sharedTooltipTable" var="message" value="#{dataTableController.messages}"
             paginator="true" rows="5" paginatorPosition="bottom"
             filteredValue="#{dataTableController.filteredMessages}">
    <f:facet name="header">
        Please move mouse over filter input fields
    </f:facet>
    <p:column filterBy="#{message.subject}" headerText="Subject">
        <h:outputText value="#{message.subject}"/>
    </p:column>
    <p:column filterBy="#{message.text}" headerText="Text">
        <h:outputText value="#{message.text}"/>
    </p:column>
    <p:column filterBy="#{message.time}" headerText="Time">
        <h:outputText value="#{message.time}"/>
    </p:column>
</p:dataTable>

<pe:tooltip value="Type any value to filter datatable" for="@(#sharedTooltipTable th .ui-column-filter)"
            shared="true" atPosition="top center" myPosition="bottom center" styleClass="qtip-default"/>


@Named
@ViewScoped
public class DataTableController implements Serializable {

    private static final long serialVersionUID = 20111020L;

    private List<Message> messages;
    private List<Message> filteredMessages;
    private String newSubject = "my subject";
    private String newText = "my text";

    public DataTableController() {
        if (messages == null) {
            messages = new ArrayList<>();

            for (int i = 0; i < 100; i++) {
                final Message message = new Message();
                message.setSubject("subject " + i);
                message.setText("text " + i);
                messages.add(message);
            }
        }
    }

    public List<Message> getMessages() {
        return messages;
    }

    public void setMessages(final List<Message> messages) {
        this.messages = messages;
    }

    public List<Message> getFilteredMessages() {
        return filteredMessages;
    }

    public void setFilteredMessages(final List<Message> filteredMessages) {
        this.filteredMessages = filteredMessages;
    }

    public String getNewSubject() {
        return newSubject;
    }

    public void setNewSubject(final String newSubject) {
        this.newSubject = newSubject;
    }

    public String getNewText() {
        return newText;
    }

    public void setNewText(final String newText) {
        this.newText = newText;
    }

    public String addMessage() {
        doSomething();

        final Message message = new Message();
        message.setSubject(newSubject);
        message.setText(newText);
        messages.add(0, message);

        newSubject = "";
        newText = "";

        final FacesContext fc = FacesContext.getCurrentInstance();
        fc.addMessage(null,
                    new FacesMessage(FacesMessage.SEVERITY_INFO, "New message has been added successfully", null));

        return null;
    }

    public void doSomething() {
        try {
            // simulate a long running request
            Thread.sleep(1500);
        }
        catch (final Exception e) {
            // Restore interrupted state...
            Thread.currentThread().interrupt();
        }
    }

    public class Message implements Serializable {

        private static final long serialVersionUID = 1L;

        private String subject;
        private String text;
        private long time;

        public Message() {
            time = System.currentTimeMillis() + (long) (Math.random() * 10);
        }

        public final String getSubject() {
            return subject;
        }

        public final void setSubject(final String subject) {
            this.subject = subject;
        }

        public final String getText() {
            return text;
        }

        public final void setText(final String text) {
            this.text = text;
        }

        public long getTime() {
            return time;
        }

        public void setTime(final long time) {
            this.time = time;
        }
    }
}

Use Cases

Documentation pe:tooltip

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
value	Value of the component than can be either an EL expression of a literal text.
converter	An EL expression or a literal text that defines a converter for the component.
widgetVar	Name of the client side widget.
global	A global tooltip converts each title attribute to a tooltip. Default value is false.
shared	A shared tooltip - one tooltip, multiple targets. Default value is false.
autoShow	This flag enables showing tooltips automatically after page loading. Auto shown tooltips can not be global or shared. Default value is false.
mouseTracking	This flag enables tooltip's positioning in relation to the mouse. Default value is false.
fixed	When set to true, the tooltip will not hide if moused over, allowing the contents to be clicked and interacted with. Default value is false.
styleClass	Style class of the tooltip will override ThemeRoller theme. Default value is null.
header	Header or Titlebar of the tooltip. Not applicable on global tooltips. Default value is null.
adjustX	A positive or negative pixel value by which to offset the tooltip in the horizontal plane (x-axis). Negative values cause a reduction in the value (moves tooltip to the left). Default value is 0.
adjustY	A positive or negative pixel value by which to offset the tooltip in the vertical plane (y-axis). Negative values cause a reduction in the value (moves tooltip upwards). Default value is 0.
atPosition	The corner of the target element to position the tooltips corner at. Default value is 'bottom right'.
myPosition	The corner of the tooltip to position in relation to the target element. Default value is 'top left'.
showEvent	Event displaying the tooltip. Default value is mouseenter.
showDelay	Delay time for displaying the tooltip. Default value is 0.
showEffect	Effect to be used for displaying. Default value is fadeIn.
showEffectLength	Time in milliseconds to display the effect. Default value is 500.
hideEvent	Event hiding the tooltip. Default value is mouseleave.
hideDelay	Delay time for hiding the tooltip. Default value is 0.
hideEffect	Effect to be used for hiding. Default value is fadeOut.
hideEffectLength	Time in milliseconds to process the hide effect. Default value is 500.
for	Id of the component to attach the tooltip.