Using the Tooltip control in WinJS for Windows Store App

The tooltip WinJS control in Windows Store App can be used to display the customizable tooltip on the HTML element . When you hover over the element ,  the tooltip appears foe few seconds and disappears as soon as the cursor is moved away from the HTML element.

Using the Tooltip control in WinJS for Windows Store App

Below is a sample code snippet demonstrating the usage of the tooltip control in WinJS for Windows Store App.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AbundantcodeWinJSApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- AbundantcodeWinJSApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <button id="btnSubmit" data-win-control="WinJS.UI.Tooltip" data-win-options="{
         innerHTML : ' Click to submit the data'  }">
        Submit
    </button>
</body>
</html>

In the above code snippet , the following is used for creating the tooltip for button.

<button id="btnSubmit" data-win-control="WinJS.UI.Tooltip" data-win-options="{
     innerHTML : ' Click to submit the data'  }">
    Submit
</button>
image