ZCS 6.0:Zimlet Developers Guide:Examples:Custom Tool Tip

Introduction

Getting Started

Dev Environment Setup

Developing Zimlets

Advanced Concepts

API Specifications

Example Zimlets

Description

This zimlet will match the words lab, user or remodel and display a tool tip. The tool tip is generated in the Handler Object when the toolTipPoppedUp() method is called.

Screen Shot

Definition File

<zimlet name="com_zimbra_example_customtooltip" version="1.0" description="Demos a custom tool tip">
    <include>com_zimbra_example_customtooltip.js</include>
    <handlerObject>com_zimbra_example_customtooltip_HandlerObject</handlerObject>
    <contentObject>
         <matchOn>
         <regex attrs="ig">lab|user|remodel</regex> <!-- matches lab or user or remodel -->
         </matchOn>
    </contentObject>
</zimlet>

Handler Object

The following code snippet from the Zimlet Handler Object creates the HTML code for the tool tip and writes the HTML to the canvas. The toolTipPoppedUp() zimlet method is called by the zimlet framework:

/**
 * This method is called when the tool tip is popped-up.
 * 
 * @param	{Object}	spanElement		the element
 * @param	{String}	contentObjText		the content object text
 * @param	{Hash}	matchContent		the match content (matchContent[0], matchContent.index, matchContent.input)
 * @param	{Object}	canvas			the canvas
 */
com_zimbra_example_customtooltip_HandlerObject.prototype.toolTipPoppedUp =
function(spanElement, contentObjText, matchContent, canvas) {
	
	// generate the HTML
	var html = new Array();
	var i = 0;
	html[i++] = "<table cellpadding=2 cellspacing=0 border=0>";
	html[i++] = ["<tr valign='center'>", "<td><b>CUSTOM TOOL TIP</b></td>", "</tr>"].join("");
	html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>contentObjText = </b>", contentObjText, "</div>", "</td></tr>"].join("");
	html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent[0] = </b>", matchContent[0], "</div>", "</td></tr>"].join("");
	html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.index = </b>", matchContent.index, "</div>", "</td></tr>"].join("");
	html[i++] = ["<tr valign='center'>", "<td><div style='white-space:nowrap'><b>matchContent.input = </b>", matchContent.input, "</div>", "</td></tr>"].join("");
	html[i++] = ["</table>"].join("");
	
	// write the HTML to the tool tip canvas
	canvas.innerHTML = html.join("");
};

Download

Zimlet Package

com_zimbra_example_customtooltip.zip

Useful Links

• Zimlet Definition File Reference