Home > English > Developing Windows 8 – Tooltips in your Settings

Developing Windows 8 – Tooltips in your Settings

I ran into a weird situation where I wanted to add tooltips to my Preferences page in the Settings charm.  If you were creating a standard command for your AppBar, you would use the following markup to include a tooltip for your control:

<div id="navBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'top'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'find', label:'Find', icon:'find', section:'selection', tooltip:'Find (Ctrl+F)'}"></button>

If you try to use the same format and put the following code in a settings flyout, you will NOT get any tooltip functionality. I had made the assumption that I could use the same format like for my AppBar:

<div class="win-settings-section">
    <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'Sample Toggle', tooltip:'This sample toggles...' }" />

In order to get tooltips to work in my settings charm pages, I had to use the following format:

<div class="win-settings-section">
    <div data-win-control="WinJS.UI.Tooltip" data-win-options="{ innerHTML: 'This sample toggles...' }">
        <div id="toggle" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'Sample Toggle' }" />

This is all that you have to do in order to get your tooltips to work in your settings pages. One thing to note, is that you are given a lot more flexibility with this wrapper approach as you can inject any HTML to provide a nice look and feel for your tooltips.

Here is a link to the MSDN page on tooltips for Windows 8 HTML.

Although this may seem trivial for anyone who reads this, it stumped me at first in that I was trying to just copy the same pattern I used for the AppBar.

Hope this helps…

Categories: English Tags: , , , , ,
  1. No comments yet.
  1. No trackbacks yet.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: