tooltipDialog - ツールチップダイアログ

別のコントロールにフォーカスがあるときにデータを表示します。データの表示時や非表示時にクライアントサイドのイベントをアクティブ化できるようにします。

カテゴリ

拡張ライブラリ

構文

<xe:tooltipDialog attributes>content</xe:tooltipDialog>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `tooltipDialog1`、`tooltipDialog2` などです。
onShow	コントロールがアクティブ状態のときに、クライアントサイドのイベント (サブミットなし) に対してこれを使用します。
onHide	コントロールが非アクティブ状態のときに、クライアントサイドのイベント (サブミットなし) に対してこれを使用します。

表 2. すべてのプロパティ
カテゴリ	プロパティ
アクセシビリティ	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
イベント	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

使用法

このコントロールは、コンテンツとイベントを定義します。このコントロールをアクティブにするには、以下のクライアントサイドの JavaScript を使用します。ここで、tooltipDialog1 はツールチップダイアログコントロールの ID、button1 は関連付けられたコントロールの ID です。

XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:button1}')

このコントロールは、最新のアクセシビリティ標準に対してテストされていません。推奨されるアクセシビリティパスは、コアコントロールを使用して期待する効果を得ることです。

例

以下のツールチップダイアログには、ボタンがダイアログをアクティブにするときに、そのボタンに対して表示されるテキストが含まれています。このツールチップダイアログには、show イベントと hide イベント用の警告ボックスが表示されます。

<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>