[This documentation is preliminary and is subject to change.]
Applies to: Metro style apps only
Displays a tooltip that can contain images and formatting.
Syntax
<span data-win-control="WinJS.UI.Tooltip"> <!-- The element that gets the tooltip goes here. --> </span> -- or -- <div data-win-control="WinJS.UI.Tooltip"> <!-- The element that gets the tooltip goes here. --> </div> -- or -- <!-- You can also directly attach the Tooltip to its target element. --> <targetElement data-win-control="WinJS.UI.Tooltip"> </targetElement>
var object = new WinJS.UI.Tooltip(element, options);
Members
The Tooltip object has these types of members:
Events
The Tooltip object has these events.
| Event | Description |
|---|---|
| beforeclose Event |
Raised just before the Tooltip is hidden. |
| beforeopen Event |
Raised just before the Tooltip appears. |
| closed Event |
Raised when the Tooltip is no longer displayed. |
| opened Event |
Raised when the Tooltip is shown. |
Methods
The Tooltip object has these methods.
| Method | Description |
|---|---|
| addEventListener Method |
Adds an event handler for the specified event. |
| close Method |
Hides the Tooltip. |
| open Method |
Shows the Tooltip. |
| removeEventListener Method |
Removes an event handler that the addEventListener method registered. |
| Tooltip Constructor |
Creates a new Tooltip. |
Properties
The Tooltip object has these properties.
| Property | Description |
|---|---|
|
Gets or sets the HTML element that is the content of the Tooltip. | |
|
Gets the DOM element that hosts the Tooltip control. | |
|
Gets or sets additional CSS classes to apply to the Tooltip control's host element. | |
|
Gets or sets a value that specifies whether the Tooltip is an infotip, a tooltip that contains a lot of info and should be displayed for longer than a typical Tooltip. | |
|
Gets or sets the HTML content of the Tooltip. | |
|
Gets or sets the position for the Tooltip relative to its target element: top, bottom, left or right. |
Remarks
By default, div elements have a display setting of block. When using a div element to host the Tooltip, set its display property to inline-block.
Styling the Tooltip
CSS classes
To customize the Tooltip, you can define your own styles for these CSS classes (defined by the Windows Library for JavaScript style sheets):
| CSS class | Description |
|---|---|
|
win-tooltip |
Styles the entire Tooltip. |
Examples
This example creates a Tooltip for a button. It attaches the Tooltip directly to the button element by setting the data-win-control and data-win-options properties on the button.
<button data-win-control="WinJS.UI.Tooltip" data-win-options="{innerHTML: 'Submit your Order'}"> Submit </button>
The next example creates a Tooltip for a hyperlink.
<span data-win-control="WinJS.UI.Tooltip" data-win-options="{innerHTML: 'Microsoft Corporation<br><span class=\'win-text-domain\'>www.microsoft.com</span>'}" style="margin-left: 40px;"><a href="http://www.microsoft.com">Microsoft</a></span>
The previous two examples used simple strings as the content for their Tooltip controls. If you want your tooltip to contain more complex content, such as images, and controls, use the contentElement property. The contentElement property lets you use another element as the content for your Tooltip. Here's an example:
<div data-win-control="WinJS.UI.Tooltip" data-win-options="{infotip: true, contentElement: select('#myContentElement')}">
<a>Box Office No. 1</a>
</div>
<div style="display: none;">
<!--Here is the content element. It's put inside a hidden container so that it's invisible to the user until the tooltip takes it out.-->
<div id="myContentElement">
<div id="myContentElement_rating">
<div data-win-control="WinJS.UI.Rating" class="win-small movieRating" data-win-options="{userRating: 3}"></div>
</div>
<div id="myContentElement_description">
<p>
You can use any DOM element as content for a Tooltip, even WinJS controls. (The Tooltip prevents interaction with the controls, however, because tooltips are not meant to be interactive.)
</p>
</div>
<div id="myContentElement_picture">
</div>
</div>
</div>
When you run the code, it displays the content element as the tooltip.
For the complete code, see the HTML Tooltip control sample.
Requirements
|
Minimum supported client | Windows 8 Release Preview |
|---|---|
|
Minimum supported server | Windows Server 2012 |
|
Namespace |
WinJS.UI |
|
Library |
|
See also
Build date: 5/22/2012
