Creating custom tooltips by extending Dojo’s Dijits – in 8 Steps

Introduction

dojo tooltipTooltips are nice small additions that can improve the user experience. They are so common that Dojo and other javascript frameworks provide precanned ways of creating them. In dojo, they provide dijits (their widgets) that can do some amazing things on the user interaction side. That being said, when you want to customize them in any way, you can run into many walls.

Dojo tooltip
dojo tooltip

Problem & Goal of this Article

The main goal of this article is to show you how to stylize the tooltips so that you can create your own type of tooltip. This article will go through the css required and how to structure your code so that you can create more than one tooltip.

To extend the style of dojo’s dijit, it’s best to copy one of the existing themes and create your own custom theme. In this tutorial, I’ve copied the “tundra” theme so all the following css code will use the “tundra” selector. You could replace the tundra selectors with your own custom name, but it may be more work than it’s worth.

Prerequisites – tools you’ll need setup:

The Steps

1. Setup a new theme
-Open up the dojo dijit theme folder
-dojo-release-1.1.1dijitthemes
2. Create a copy of the “tundra” folder.
3. Rename it to the name of your theme. (e.g. – “tundraextended”)
4. Include the dojo style and your extended theme in your header code:

<style type=”text/css”>
@import “pathtodojo/dojo-release-1.1.1/dijit/themes/tundraextended/tundra.css”;
@import “pathtodojo/dojo-release-1.1.1/dojo/resources/dojo.css”
</style>

5. Include the tool tip dijit:

<script type=”text/javascript”>
dojo.require(”dojo.parser”);
dojo.require(”dijit.Tooltip”);
</script>

6. Add the tool tip code

<body class=”tundra”> <!– you need to set the body to load the dijit styles –>

<a id=”theId” href=”#”>Hover over this</a>

<div dojoType=”dijit.Tooltip” style=”display:none” position=”left” connectId=”theId”>
<div class=”custom_tooltip”>tool tip content</div>
</div>

Note the attribute “position=left”. This should remain the same for all tooltips that are defined by the inner class “custom_tooltip”. I don’t really use the position attribute and rely on css position.

At this point you should have a simple tool tip hover when the mouse goes over the link. If you don’t, then open up firebug and see if you have any errors. If you do, then you most likely didn’t setup dojo properly.

If all is good now, then you have a nice basic tooltip. Now, the hard part is how to extend the look:
7. Create a new css file – dojoextended.css
This style sheet should be included last. As its name suggests, it extends (overrides and resets) the dojo stylesheet.

<style type=”text/css”>
@import “pathtodojo/dojo-release-1.1.1/dijit/themes/tundraextended/tundra.css”;
@import “pathtodojo/dojo-release-1.1.1/dojo/resources/dojo.css”
@import “pathtocss/dojoextended.css”
</style>

8. Add the following css to the extended css file

/*Reset the generic tooltip container */
.tundra .dijitTooltipContainer
{
background:none;
padding:0;
margin:0;
border:none;
height:auto;
width:auto;
}

/*defines the div inside the tooltip – your custom tooltip*/
.custom_tooltip
{
/*this defines your tooltip*/
position:relative;
left:5px; /*use left and top to position it */
top:15px;
width:125px;
height:100px;
background-image:url(”yourimage.png”);
}

/*if your tooltip uses transparency, define a ie6 specific one below */
.dj_ie6 .tundra .custom_tooltip
{
background-image:url(”yourimage_ie6.png”); /*an 8-bit png*/
}

/*hide the connector – an arrow that connects the tooltip to the hovered item */

.tundra .dijitTooltipAbove .dijitTooltipConnector { background:none; }
.tundra .dijitTooltipLeft .dijitTooltipConnector { background:none; }
.tundra .dijitTooltipBelow .dijitTooltipConnector { background:none; }
.tundra .dijitTooltipRight .dijitTooltipConnector { background:none; }

You’re done!

You can now create as many styles for your tooltips as you need by defining a specific div and a new style (e.g. – custom_tooltip2). You will likely have to do a lot of tweaking on the positioning image, but it’s pretty straightforward when you look at it. The longest part is determining which css selectors you need to use, if you look at the tundra.css class you’ll notice there are more selectors I didn’t look at.

Pros

-Quick to code.
-Easy to understand, there’s only one div to deal with.
-IE6 compliant. It’s always a bonus :) .
-Extendability. You can now create as many tooltips as you want for one project. With the standard tooltip, you would be stuck with one tooltip for an entire project.

Cons

-Inefficient: Resetting styles is cumbersome and requires more data to be loaded.
-Upgrading dojo could break the custom tooltips if they change the way the tooltip are rendered.
-Tooltipconnector: I didn’t use the tooltipconnector which allows you to position the tooltip in various positions easily.

Conclusion
That wraps up the first tutorial on dojo. I hope you found it useful, and I appreciate all feedback. If you have a better way, I would like to know about it. My next article will look at how to combine dojo’s ajax with the zend framework.

Share/Save/Bookmark

One Response to “Creating custom tooltips by extending Dojo’s Dijits – in 8 Steps”

  1. jaturapith  on January 9th, 2009

    I thank you your suggestion about customized tool tip. But i doubt about how to show text in Asia-language such as thai lan. Please, suggest me about this problem. Thank you so much. ;-)


Leave a Reply