OverviewSince 3.0 The tooltip component is used to pop up a tooltip for another component. You can specify various positions and effects for the tooltip.
Getting Started<h:outputText id="text" ... /> ... <ace:tooltip for="text" ... > ... </ace:tooltip> Attributes
for: id of the component that the tooltip is for. position and targetPosition are used to position the tooltip relative to the target component, e.g. "topLeft" corner of tooltip at "bottomRight" corner of target component. showEvent, showDelay, showEffect, showEffectLength specify the event and effect to show the tooltip. The corresponding attributes for hiding the tooltip are hideEvent, hideDelay, hideEffect, hideEffectLength Event Listeners
Client Behavior Events
JavaScript APIICEfaces 3.xThe client side component object is exposed through the global variable name specified in the widgetVar attribute. ICEfaces 4+The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use. var widget = ice.ace.instance('frm:componentId);
Keyboard and ARIA SupportThe following ARIA roles are supported: alert. Advanced Example<ace:tooltip id="tooltip" for="content" speechBubble="true" showEffect="slide" hideEffect="fade" showDelay="100" hideDelay="500" position="bottomLeft" targetPosition="topRight" showEffectLength="300" hideEffectLength="300"> <!-- content --> </ace:tooltip> CSS ClassesThe following markup represents the basic HTML structure of the component and the CSS classes it uses. <div class="qtip qtip-pos-tr ui-helper-reset ui-widget ui-tooltip qtip-fixed ui-widget-content ice-ace-tooltip ui-corner-all [user defined classes]" style="[user defined styles]"> <div class="qtip-tip"><canvas></canvas></div> <div class="qtip-content ui-widget-content ui-tooltip-content"> <!-- Tooltip content --> </div> </div> Known IssuesNone. Other NotesThis component can be used in delegate mode. For more information, visit this page. Additional Resources |
Tooltip
© Copyright 2021 ICEsoft Technologies Canada Corp.