HintLabel |
||
Developer’s Guide Home
Installation and Configuration Components Index Calendar Chart Confirmation Data Table Date Chooser Drop Down Field Dynamic Image Folding Panel Hint Label Popup Layer Suggestion Field Tab Set Tabbed Pane Tree Table Two List Selection Utility Components Validation Framework Tag Reference |
The HintLabel component is used to display text as a single-line label of fixed length which is displayed fully in a tooltip when the mouse pointer is placed over the label. If the text doesn't fit in the label, it will be automatically truncated (Microsoft Explorer adds an ellipsis to the truncated text). If the text is as long as the label itself, no tooltip will be displayed for it. Note that the tooltip appears not on the side of the label but over it and remains visible as long as the mouse pointer stays within the bounds of the HintLabel component. Key FeaturesBasic ConfigurationTo add the HintLabel component to a page, use the <q:hintLabel> tag. The value attribute of the <q: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. <q:hintLabel style="width: 100px;" value="#{ForumMessages.topic}"/> Note By default, the tooltip shows the same text as set in the value attribute and displayed in the label. You can specify different text for the tooltip by using 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. <q: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)"/>
In the following example, a HintLabel appears in 1 second after being pointed by the mouse pointer. <q:hintLabel style="width: 300px;" value="Jupiter is the fifth planet from the Sun and by far the largest" hintTimeout = "1000" /> Customizing StylesYou 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 EventsThe HintLabel component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove. |
|
© 2007 TeamDev Ltd. | ![]() |