This sample shows pop-ups decorating a simple form. A tooltip is evoked on an onMouseOver event and disappears in 0.5 second after the cursor moves away. A popup is displayed upon an onClick event and disappears when it loses focus. A context menu is invoked upon an onRightClick event and disappears when an menu item is clicked or when it loses focus.

<zk>
	<grid width="450px">
		<columns>
			<column label="Option" width="100px" />
			<column label="Input" />
		</columns>
		<rows>
			<row>
				To :
				<hlayout>
					<textbox width="150px" value="info@zkoss.org"
						constraint="/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)*/: Please enter real e-mail address" />
					<separator orient="vertical" spacing="3px" />
					<image src="/widgets/popup/pop-ups/img/QuestionmarkButton-16x16.png" tooltip="mail"
						style="cursor: help" />
					<separator orient="vertical" spacing="3px" />
					<label value="Hover cursor Over Me!" tooltip="mail" />
				</hlayout>
			</row>
			<row>
				Subject :
				<hlayout>
					<textbox value="I love ZK" width="150px" />
					<separator orient="vertical" spacing="3px" />
					<image style="cursor:pointer" popup="title"
						src="/widgets/popup/pop-ups/img/QuestionmarkButton-16x16.png" />
					<separator orient="vertical" spacing="3px" />
					<label value="Click Me!" popup="title" />
				</hlayout>
			</row>
			<row>
				Introduction:
				<hlayout>
					<textbox id="intro" rows="3" width="250px"
						context="editPopup" value="Right Click Me!" />
				</hlayout>
			</row>
		</rows>
	</grid>
	<menupopup id="editPopup">
		<menuitem label="ClearAll" onClick="intro.value=null" />
		<menu label="QuickText">
			<menupopup>
				<menuitem label="Everything is OK!"
					onClick="intro.value=intro.value + self.label" />
				<menuitem label="Thank you very much!"
					onClick="intro.value=intro.value + self.label" />
				<menuitem label="I'm on a business trip!"
					onClick="intro.value=intro.value + self.label" />
				<menuitem label="I'm busy now!"
					onClick="intro.value=intro.value + self.label" />
			</menupopup>
		</menu>
	</menupopup>
	<popup id="title">
		Input the subject of this letter. Problem report:
		<a label="ZK Forum" target="zkdemo" href="http://www.zkoss.org/forum"/>
	</popup>
	<popup id="mail" width="300px">
		Please enter one or more email addresses, separated by semi-colon.
		<separator/>
		e.g.: <label style="font-family: monospace;">zk@zkoss.org;info@zkoss.org</label>
	</popup>
</zk>