TOOLTIP

<TOOLTIP/> : ViewableWidget

The <TOOLTIP/> (or <TIP/>) widget can be a direct child of any viewable widget. The <TOOLTIP/> can contain other widgets and is displayed based on the gesture attribute specified.

The tooltip widget is typically used to display information about the widget itself. It can be triggered by mouse hover, tap, longpress or manually using the Open() and Close() methods.

Attributes

Name	Type	Default	Description	Req
color	string		The color of the tooltip background
arrow	boolean	true	If the tooltip bubble should include the callout arrow
padding/pad	int	10	The padding between the tooltip background edges and the content
radius	int	8	The background corner rounding radius
position	string	rightCenter	The preferred position of the tooltip. leftStart leftCenter leftEnd topStart topCenter topEnd bottomStart bottomCenter bottomEnd rightStart rightCenter rightEnd Refer to Tooltip Positioning below.
modal	boolean	false	If the tooltip should display as modal
timeout	int		The timeout in milliseconds before the tooltip automatically closes
distance	int	8	The distance, in pixels, the tooltip callout is positioned from the target widget
gesture	string	hover	The preferred method of opening/closing the tooltip. hover tap longpress manual
cursor	string	click	alias → A cursor indicating that the current operation will create an alias of, or a shortcut of the item allScroll → A cursor indicating scrolling in any direction basic → The platform-dependent basic cursor cell → A cursor indicating selectable table cells click → A cursor that emphasizes an element being clickable, such as a hyperlink contextMenu → A cursor indicating somewhere the user can trigger a context menu copy → A cursor indicating that the current operation will copy the item disappearing → A cursor indicating that the current operation will result in the disappearance of the item forbidden → A cursor indicating an operation that will not be carried out grab → A cursor indicating something that can be dragged grabbing → A cursor indicating something that is being dragged help → A cursor indicating help information move → A cursor indicating moving something noDrop → A cursor indicating somewhere that the current item may not be dropped none → Hide the cursor precise → A cursor indicating precise selection, such as selecting a pixel in a bitmap progress → A cursor indicating the status that the program is busy but can still be interacted with resizeColumn → A cursor indicating resizing a column, or an item horizontally resizeDown → A cursor indicating resizing an object from its bottom edge resizeDownLeft → A cursor indicating resizing an object from its bottom-left corner resizeDownRight → A cursor indicating resizing an object from its bottom-right corner resizeLeft → A cursor indicating resizing an object from its left edge resizeLeftRight → A cursor indicating resizing an object bidirectionally from its left or right edge resizeRight → A cursor indicating resizing an object from its right edge resizeRow → A cursor indicating resizing a row, or an item vertically resizeUp → A cursor indicating resizing an object from its top edge resizeUpDown → A cursor indicating resizing an object bidirectionally from its top or bottom edge resizeUpLeft → A cursor indicating resizing an object from its top-left corner resizeUpLeftDownRight → A cursor indicating resizing an object bidirectionally from its top left or bottom right corner resizeUpRight → A cursor indicating resizing an object from its top-right corner resizeUpRightDownLeft → A cursor indicating resizing an object bidirectionally from its top right or bottom left corner text → A cursor indicating selectable text verticalText → A cursor indicating selectable vertical text wait → A cursor indicating the status that the program is busy and therefore can not be interacted with zoomIn → A cursor indicating zooming in zoomOut → A cursor indicating zooming out

Methods

Name	Description
open()	Opens the tooltip.
close()	Closes the tooltip.

Tooltip Positioning

Examples

Example #1 : a simple <ICON/> tooltip.

<ICON icon="mood" color="yellow">
  <TOOLTIP id="tip" pad="15" position="leftend" distance="20">	
       <COLUMN expand="false">
	   <ICON icon="close" color="yellow"/>
	   <TEXT value="hello world" size="18"/>
	</COLUMN>
  </TOOLTIP>
</ICON>

See it in Action