tooltipDialog - Tooltip Dialog

Displays data when another control is in focus. Allows activation of client-side events when the data is shown and hidden.

Category

Extension Library

Syntax

<xe:tooltipDialog attributes>content</xe:tooltipDialog>
Table 1. Essential properties
Property Description
id Defaults to tooltipDialog1, tooltipDialog2, and so on.
onShow Use this for a client-side event (no submission) when the control is activated.
onHide Use this for a client-side event (no submission) when the control is deactivated.
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, dir, errorMessage, extractContent, href, id, keepComponents, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events afterContentLoad, beforeContentLoad, onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling disableTheme, style, styleClass, themeId

Usage

This control defines content and events. To activate the control, use the following client-side JavaScript where tooltipDialog1 is the identifier of the Tooltip Dialog control and button1 is the identifier of the associated control:
XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:button1}')

This control is not tested against the latest accessibility standards. The recommended accessible path is to use core controls to achieve the desired effect.

Examples

This tooltip dialog contains text that is displayed for a button when the button activates the dialog. The tooltip dialog displays alert boxes for the show and hide events.
<xp:button value="Display a TooltipDialog with onShow/onHide events" id="button20">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:button20}')]]></xp:this.script>
	</xp:eventHandler>
</xp:button><xp:br></xp:br>
<xe:tooltipDialog id="tooltipDialog1" title="This is a tooltip dialog">
	<xp:panel>Are you seeing the events?</xp:panel>
	<xp:eventHandler event="onShow" submit="false">
		<xp:this.script><![CDATA[alert('TooltipDialog: OnShow - EventHandler')]]></xp:this.script>
	</xp:eventHandler>
	<xp:eventHandler event="onHide" submit="false">
		<xp:this.script><![CDATA[alert('TooltipDialog: OnHide - EventHandler')]]></xp:this.script>
	</xp:eventHandler>
</xe:tooltipDialog>