The user interface of Windows Store applications - Build Windows 8 Apps with HTML5 and JavaScript - page 137

Adding a button and tooltips
The final section of the form contains a button through which the user collects all the entered data
and triggers an operation that physically persists that data somewhere. You won't do anything to
save the data in this exercise, but you'll see how to collect data and summarize it for the user. The
following markup from the fourth section contains two interesting things: a push button and a
tooltip. (A tooltip is a small pop-up window shown when the mouse hovers over a control with the
purpose of displaying useful information to the user.)
<div class="form-section">
<div>
<button id="buttonAddTask"
data-win-control="WinJS.UI.Tooltip"
data-win-options="{innerHTML: '<b>Purpose</b><hr>Add the <i>newly
created</i> task to the list.'}">
Add Task
</button>
</div>
</div>
Important In the example above, the content of the innerHTML property has been split on
two rows for readability purposes. If you're typing this code right into a Visual Studio editor,
then make sure that you type it as a continuous string; otherwise your code won't compile.
Note In this topic, you write Windows 8 applications using HTML and other web-related
technologies, such as CSS and JavaScript. In this regard, it might be surprising for any
developer with a bit of web development experience to arrange a web form without using
the HTML form element and submit buttons. In Windows 8, you just don't need any form
element since there's no server-side component to receive the post of the form's content.
On any form intended to collect input data, all you need to have is one or more buttons to
trigger actions. You can render these buttons using the plain button element.
In Windows 8, you can add a tooltip to any HTML element by simply adding a data-win-control
attribute set to WinJS.UI.Tooltip. You also use the data-win-options attribute to initialize the new
control. In this case, you pass the innerHTML property the markup text to be displayed when the user
hovers over the button.
Buttons aren't useful unless they have an associated click event. It is a good programming practice
to associate event handlers to HTML elements during page initialization. In this case, you go back to
the todolist.js file and edit the TodoLit.init function, as shown below:
TodoList.init = function () {
document.getElementById("buttonAddTask")