Using the Tooltip Manager
Tooltip represents a small rectangular area that displays a brief description
to help users on mouse over within an object. The XUI-framework provides
two ways to add a tooltip to an object: an inline tooltip at the component
level and a tooltip collection. The following figure is an example of
a tooltip generated within the XUI-framework.
Figure 1. A Tooltip example
Inline Tooltip
The in-line tooltip is supported by the following XUI components: XtoolbarItem,
Xbutton, Xicon, Xlabel, and Xtable. For those components, the tooltip
is invoked by entering the text directly into the “tooltip”
attribute. When the tooltip is set, the tooltip appears when a user moves
the cursor over (mouseover) the object. It disappears when the user moves
the cursor out of the object (mouseout) or after 3 seconds. When using
the in-line tooltip, only the text string can be set through the tooltip
attribute. To change the style of the tooltip area, modifications to the
CSS of tooltip for each look-and-feel are necessary. Please refer to the
Look-and-Feel Manager section to change
the CSS for a particular look-and-feel. The following code example shows
how to add a tooltip in an Xlabel. In the following code example, the
“tooltip” attribute is used to set the text contained in the
tooltip.
<xlabel id="myLabel" tooltip="Information includes author, manager, description, and
created date” text=”Project Information”/>
Tooltip Collection
The “tooltipcollection” element in the XUI-Framework provides
a convenient way to organize tooltips that are used throughout the page.
Tooltipcollection serves as a centralized location of tooltips. The basic
unit of tooltipcollection is the “tooltip” element, which
represents each tooltip that is added to an object. When the tooltip is
added using tooltipcollection, the tooltip can be assigned to any object
on the page. The “object-id” attribute is set to indicate
the object where the tooltip is assigned. The type of event that triggers
the tooltip can be changed by setting the “show-when” attribute.
The default event type is “mouse-over”. When the user moves
the cursor out of the object or 3 seconds pass after the appearance of
the tooltip, it will disappear. You can also change the width, height,
text alignment, and style using the “width”, “height”,
“text-align”, and “style” attributes respectively.
The cursor type can also be changed for any component where the text is
not selectable, such as an xpanel, using the "cursor" attribute.
Most components, however, maintain control of the cursor type for continuity
in functionality and user experience.
<xui:view validation="true">
<xframe>
<properties>
<title>Xtooltip text</title>
</properties>
<xcontentpane id="myContentpane" style="padding:10px">
<xbutton id="projectButton" text="Project Info"/>
<xbutton id="taskButton" text="Task Info"/>
</xcontentpane>
<tooltip-collection>
<tooltip id="tooltip1" name="project" object-id="projectButton"
text="Information includes author, manager, description, and created date"
text-align="right" width="200px" height="100px"/>
<tooltip id="tooltip2" name="task" object-id="taskButton" show-when="onclick"
text="Information includes name of developer, description, and due date"
style="padding:10px"/>
</tooltip-collection>
</xframe>
</xui:view>
In the code example above, tooltips are added to two objects with ids
“projectButton” and “taskButton”. The “text”
attribute is used to set the tooltip text and the “object-id”
attribute is used to indicate the id of the object where the tooltip is
added. For the tooltip that is added to the object with id ‘projectButton’,
the width is set to 200 pixels and 100 pixels in height. The text alignment
is right justified. The tooltip with id ‘tooltip2’ uses an
‘onclick’ event. The “style” attribute is used
to set the padding in the tooltip area.
Back to: Application
Guide
|
