Home arrow JavaScript arrow How to Use the Dojo Tooltip Widget
JAVASCRIPT

How to Use the Dojo Tooltip Widget


Windows uses tooltips; they're also commonly found on web pages. This article shows you how to use dojo to render tooltips with some very useful and unusual effects.

Author Info:
By: Jayaram Krishnaswamy
Rating: 4 stars4 stars4 stars4 stars4 stars / 22
January 23, 2007
TABLE OF CONTENTS:
  1. · How to Use the Dojo Tooltip Widget
  2. · Tooltip in HTML
  3. · Creating a tooltip for objects
  4. · Getting some color into the tooltip
  5. · How about an image in the tooltip?
  6. · The default style of dojoType tooltip
  7. · Creating a tooltip dynamically

print this article
SEARCH DEVARTICLES

How to Use the Dojo Tooltip Widget
(Page 1 of 7 )

Introduction

Tooltips are window control objects used to add extra information in the form of descriptive text displayed in a pop-up window. Just hovering over the element pops up this extra information (see the next picture). Tooltips are extensively used in both Windows forms and web pages. Microsoft controls, from early on, used the tooltip property that would bring up a little beige window with some text.

Tooltip text is also displayed on web pages. The DOJO Foundation's tooltip rendering is awesome. The tooltips rendered by HTML pale in comparison. This article, like the previous one, is really basic and is written to give a flavor of what this widget does and how it is done. The readers should visit the Dojo Foundation web site to learn more about the exciting possibilities.

Microsoft tooltip control

The Microsoft variety of tooltip can be seen in all of its products, from the Start button of Windows to the tooltips that pop up over most of its controls. Here is a basic one from Windows XP.

In Visual Basic you would set the tooltip property if you need to use the tooltip to provide some additional information. In the .NET 3.0 environment the tooltip can escape the drab "text only" rendering and use the ContentProperty, as in the following XAML code for the tooltip property of a textbox. But XAML has yet to find widespread use. The tooltip in this case will be mainly described by the non-inheritable ToolTip and ToolTipService classes. The next snippet is taken from Microsoft documentation.

<TextBox HorizontalAlignment="Left">ToolTip with non-text content
<TextBox.ToolTip>
<ToolTip>
<DockPanel Width="50" Height="70">
<Image Source="data\flower.jpg"/>
<TextBlock>Useful information goes here.</TextBlock>
</DockPanel>
</ToolTip>
</TextBox.ToolTip>
</TextBox>


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials