Skip to content

HintLabel 2.x

Jump to bottom
AlexanderLitus edited this page Aug 12, 2014 · 14 revisions

TOCSTART

TOCEND

The HintLabel component is used to display a single-line text that may not fit in the allotted space, but when the user places mouse pointer over the truncated text, the full text is displayed in a tool-tip.

<br/>
<img src="https://github.com/TeamDev-Ltd/OpenFaces/blob/master/wikiResources/hintLabel.png"/>
<br>
<a href="http://www.openfaces.org/demo/hintlabel/" class="external-link" rel="nofollow">Online Demo</a>

Key Features

Basic Configuration

To add the HintLabel component to a page, use the <o:hintLabel> tag. The value attribute of the <o:hintLabel> tag lets you specify the text for the component. By using the style-related attributes, you can set the width of the HintLabel component.

In the following example, only the text that fits in 100 pixels is displayed. If the user moves the mouse pointer over the HintLabel component, the full text will appear in the tooltip.

<o:hintLabel style="width: 100px"
             value="#{ForumMessages.topic}"/>
The HintLabel text is rendered using a block HTML element and occupies 100% width by default. So in most cases you may omit explicit width specification, for example when inserting HintLabel inside of DataTable, and it will use the entire available width.

By default, the tooltip shows the same text as set in the value attribute and displayed in the label. You can specify a different text for the tooltip by using the hint attribute. Note that if the hint attribute is specified, the tooltip is displayed when the mouse pointer is placed over the label, whether the text is as long as the label itself or not.

As seen from the following example, two different texts will be displayed when the HintLabel component is hovered by the mouse pointer and not.

<o:hintLabel style="width: 300px"
             value="Jupiter is the fifth planet from
                    the Sun and by far the largest"
             hint="Jupiter is more than twice as massive
                    as all the other planets combined
                    (the mass of Jupiter is 318 times that of Earth)"/>


By default, the tooltip appears after the mouse pointer hovers over the HintLabel component for 0.1 second. To modify this time, set the hintTimeout attribute (in milliseconds) to a desired value. Please not that the hintTimeout attribute specifies the amount of time between when the mouse pointer is placed over the component and when the HintLabel component is actually displayed. The tooltip is displayed as long as the mouse pointer remains within the bounds of the HintLabel component.

In the following example, a HintLabel appears in 1 second after being pointed by the mouse pointer. 

<o:hintLabel style="width: 300px"
             value="Jupiter is the fifth planet
                    from the Sun and by far the largest"
             hintTimeout = "1000" />

Customizing Styles

You can define a style for the HintLabel component by using the style and styleClass attributes. By default, the tooltip inherits style properties defined for the HintLabel component and also adds the border and background. You can create a custom style for the tooltip by using the hintStyle and hintClass attributes.

Client-Side Events

The HintLabel component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove.

Clone this wiki locally