Windows 8 adventures: playing with the Tooltip control

The Tooltip control is one of the new controls introduced by WinRT JavaScript API. After looking at the docs, I’ve decided to see how I could use it in a real world scenario. Since it’s a Windows 8 control, I knew that I could instantiate it by applying the win-data-control attribute to a div (and, of course, don’t Forget to initialize the controls by calling WinJS.UI.process/All method):

<div data-win-control="WinJS.UI.Tooltip" 
data-win-options="{placement: 'right'}">
 Testing another tooltip
</div>

The placement property is used to hint the place where the tooltip should be set (it accepts the strings top, left, right and bottom). Now, the next step is understanding how we can associate the tooltip with an existing control. After checking the property list, I didn’t find any property which would let me associate the tooltip with an existing control. I did, however, find an innerHTML property, that can be used for setting the HTML shown by the control. And that’s when I thought about putting the Tooltip’s associated control inside the Tooltip’s div:

<div data-win-control="WinJS.UI.Tooltip"
 data-win-options=
 "{placement: 'right', innerHTML: 'Testing another tooltip'}">
 <input type="button" value="This is a simple button" />
</div>

And sure enough, it worked: putting the mouse over the button is all that it takes to see the custom tooltip:

simpletooltip

Well, the tooltip is shown, but the results aren’t probably the one you’d expect since you’re probably expecting to see the tooltip being presented besides the button. If you think about it for a minute, then the problema is rather obvious. By default, div’s display is set to block and that means it’ll occupy a whole line, relegating the tooltip’s text to the next line. One possible solution is chaning the div’s display CSS property by using a CSS class rule:

.tooltip { display: inline-block; }

And then, we need to apply the class to the tooltip’s div:

<div data-win-control="WinJS.UI.Tooltip" 
 class="tooltip"
 data-win-options=
 "{placement: 'right', innerHTML: 'Testing another tooltip'}">
 <input type="button" value="This is a simple button" />
</div>

And then, everything works as expected:

toolti

If you want, you can also define the HTML shown by the tooltip in another HTML element. In order to do that, you need to set the contentElement property. Here’s how you can do that:

<div data-win-control="WinJS.UI.Tooltip" 
 data-win-options=
 "{placement: 'right', innerHTML: 'Testing another tooltip'}">
 <input type="button" value="This is a simple button" />
</div>
<div id="contentTooltipContainer">
 <div id="contentTooltip"> Just a simple toggle button... </div>
</div>

Notice that I’m wrapping the HTML element which is used by the Tooltip in a another div so that I can hide it from the UI (by applying a CSS rule which targets the contentTooltipContainer ID). If you don’t do that, the div’s content will be shown in the UI. Looking at the docs, there’s another important property which needs some explaining: I’m talking about the infotip property. When you set it to true, you’re saying that the tooltip should be displayed for a little bit more time than usual. This is a good option when you have more than one line of text or when you need to worry about the finger occlusion problem (setting infotip to true requires a longer holding time before it appears, and once it’s opened, the underlying item will not be activated when the user lifts his or her finger). Here’s the result I’ve ended up with:adjustingtooltip

Before ending, there’s still time to mention the existence of the HTML title attribute. If you’ve been doing Web development, you probably know that you can add a tooltip by setting the title attribute. However, creating a tooltip by setting the title attribute is a rather limited approach. For instance, you can only pass it text and you have no multi-touch support. Whenever you need any of these options, you should rely on the Tooltip control.

And that’s it for now. Stay tuned for more.

Advertisements

~ by Luis Abreu on January 9, 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: