Windows Dev Center

WinJS.UI.Tooltip object

[This documentation is preliminary and is subject to change.]

Applies to: Metro style apps only

Displays a tooltip that can contain images and formatting.


<span data-win-control="WinJS.UI.Tooltip">
   <!-- The element that gets the tooltip goes here. -->
-- or --
<div data-win-control="WinJS.UI.Tooltip">
   <!-- The element that gets the tooltip goes here. -->

var object = new WinJS.UI.Tooltip(element, options);


The Tooltip object has these types of members:


The Tooltip object has these events.

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.



The Tooltip object has these methods.

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.



The Tooltip object has these properties.


contentElement Property

Gets or sets the HTML element that is the content of the Tooltip.

element Property

Gets the DOM element that hosts the Tooltip control.

infotip Property

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.

innerHTML Property

Gets or sets the HTML content of the Tooltip.

placement Property

Gets or sets the position for the Tooltip relative to its target element (its contentElement): top, bottom, left or right.



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 classDescription


Styles the entire Tooltip.



This example creates a Tooltip for a button.

<div class="tooltipAnchor" data-win-control="WinJS.UI.Tooltip" 
    data-win-options="{innerHTML: 'Go to the next page'}">

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.

    display: inline-block;

You can also use another element as the contents of your Tooltip. To use another element, set the contentElement property to the ID of the element you want to use. Here's an example:

<div data-win-control="WinJS.UI.Tooltip" 
    data-win-options="{infotip: true, contentElement: myContentElement}">
    <a href="somelink.htm">Box Office No. 1</a>
<div style="display: none;">
    <!--Here is the content element. It's inside a hidden container so that 
        it's invisible to the user until the tooltip displays it.-->
    <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 id="myContentElement_description">
                You can provide any HTML element as content, even one that has contains
                Windows Library for JavaScript controls. The tooltip control add the 
                the element as a child of the tooltip container 
                and blocks interaction events on that element.</p>
        <div id="myContentElement_picture">

When you run the code, it displays the content element as the tooltip.

A tooltip that contains images and a Windows Library for JavaScript control.

Here are the CSS styles that accompany this example:

    display: -ms-grid;
    width: 350px;
    -ms-grid-rows: 40px auto;
    -ms-grid-row-align: start;
    padding: 10px;

    -ms-grid-column: 1;
    -ms-grid-row: 1;
    padding: 10px;

    -ms-grid-column: 2;
    -ms-grid-row-span: 2;
    font-size: 10pt;

    -ms-grid-column: 1;
    -ms-grid-row: 2;
    background-image: url("../images/SauceCaramel.png");
    background-position: center top;
    background-repeat: no-repeat;

    color: rgba(0, 0, 0, 0.3);

    color: rgb(33, 33, 33);

    color: rgba(0, 0, 0, 0.3);

    color: rgb(53, 174, 67);


Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta







Build date: 2/10/2012

Ajouts de la communauté

© 2015 Microsoft