<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jason Houle &#187; tooltip</title>
	<atom:link href="http://blog.jasonhoule.com/tag/tooltip/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.jasonhoule.com</link>
	<description>Web site developer</description>
	<lastBuildDate>Wed, 07 Apr 2010 03:35:05 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Dijit Tooltips</title>
		<link>http://blog.jasonhoule.com/2009/08/dijit-tooltips/</link>
		<comments>http://blog.jasonhoule.com/2009/08/dijit-tooltips/#comments</comments>
		<pubDate>Tue, 04 Aug 2009 03:38:56 +0000</pubDate>
		<dc:creator>Jason Houle</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Zend Framework]]></category>
		<category><![CDATA[Dijit]]></category>
		<category><![CDATA[Dojo]]></category>
		<category><![CDATA[tooltip]]></category>

		<guid isPermaLink="false">http://blog.jasonhoule.com/?p=53</guid>
		<description><![CDATA[Why such poor documentation? I find it very hard to understand why Zend would choose such a poorly documented Javascript library to include with their framework. I understand Dojo itself has some undergone some serious changes with even minor releases (I am using version 1.3) which is very, very frustrating for developers. I have not [...]]]></description>
			<content:encoded><![CDATA[<h2>Why such poor documentation?</h2>
<p>
I find it very hard to understand why Zend would choose such a poorly documented Javascript library to include with their framework. I understand Dojo itself has some undergone some serious changes with even minor releases (I am using version 1.3) which is very, very frustrating for developers. I have not had any problems finding documentation for Prototype or jQuery. Why is there such a lack of documentation for such a high profile library? I even attended the Rational Developers Conference and IBM was pushing the dojo framework. It makes me want to bang my head against the wall. Everything I could find is outdated.
</p>
<p>
Now that my rant is over, it does look like <a href="http://dojotoolkit.org" target="_blank">dojotoolkit.org</a> is being updated with current data. Perhaps, if Zend will continue to ship their framework with dojo, they can send some money their way to help resolve this issue. Otherwise, we may see a lot of people going back to Prototype, jQuery, or YUI.
</p>
<h2>To the subject at hand</h2>
<p>Such a simple task, yet all documentation I could find is out of date. Here is how to create a tooltip with dojo and dijit in a Zend page template. In this case I added a tooltip to the search form.
</p>
<p><b>myPage.phtml</b></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> 
   <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">headLink</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">appendStylesheet</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'/styles/forms.css'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">dojo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">enable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">setLocalPath</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'/scripts/Dojo/dojo/dojo.js'</span><span style="color: #009900;">&#41;</span>
          <span style="color: #339933;">-&gt;</span><span style="color: #004000;">addStyleSheetModule</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'dijit.themes.tundra'</span><span style="color: #009900;">&#41;</span>
          <span style="color: #339933;">-&gt;</span><span style="color: #004000;">setDjConfigOption</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'parseOnLoad'</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>
          <span style="color: #339933;">-&gt;</span><span style="color: #004000;">requireModule</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'dijit.Tooltip'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;div id=&quot;search_form&quot;&gt;
	&lt;form id=&quot;search&quot; onsubmit=&quot;return false&quot;&gt;
		Search: &lt;input type=&quot;text&quot; id=&quot;search_box&quot; onkeypress=&quot;search(event)&quot; /&gt;
		&lt;div dojoType=&quot;dijit.Tooltip&quot; connectId=&quot;search_box&quot; label=&quot;&lt;div style='text-align:left'&gt;&lt;b&gt;To search for $ amount:&lt;/b&gt;&lt;br /&gt; Enter '&lt;' or '&gt;' and amount. &lt;br /&gt;&lt;br /&gt;&lt;b&gt;To search a state&lt;/b&gt;&lt;br /&gt; Enter the state name.&lt;br /&gt;&lt;br /&gt;&lt;b&gt;Everything else&lt;/b&gt;&lt;br /&gt;Just enter the text to search for.&lt;/div&gt;&quot;&gt;&lt;/div&gt;		
	&lt;/form&gt;
&lt;/div&gt;</pre></div></div>

<p><img src="http://blog.jasonhoule.com/wp-content/uploads/2009/08/tooltip.png" /></p>
<h2>What it does</h2>
<p>When the user hovers over the search field a tooltip is shown, giving the user suggestions on how to use the search. Simple enough, right? Just require the correct modules, use &#8220;connectId&#8221; to assign the tooltip to the correct element, and use the label attribute to set the text of your tooltip. Was that so hard? Perhaps <a href="http://dojotoolkit.org" target="_blank">dojotoolkit.org</a> should go to a wiki format so we developers can update it as we figure out how to use it.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.jasonhoule.com/2009/08/dijit-tooltips/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

