The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

WinJS.UI.Tooltip object

Applies to Windows only

Displays a tooltip that can contain images and formatting.

Image of a tooltip with 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. -->

-- or --

<!-- You can also directly attach the Tooltip to 
     its target element. -->
<targetElement data-win-control="WinJS.UI.Tooltip">

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


The Tooltip object has these types of members:


The Tooltip object has these events.

onbeforeclose Event

Raised just before the Tooltip is hidden.

onbeforeopen Event

Raised just before the Tooltip appears.

onclosed Event

Raised when the Tooltip is no longer displayed.

onopened 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.


Releases resources held by this Tooltip. Call this method when the Tooltip is no longer needed. After calling this method, the Tooltip becomes unusable.

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.

PropertyAccess typeDescription

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.



Gets or appends additional CSS classes to apply to the element that hosts the Tooltip.

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: top, bottom, left or right.



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 classDescription


Styles the entire Tooltip.



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'}">

The next example creates a Tooltip for a hyperlink.

<span data-win-control="WinJS.UI.Tooltip" data-win-options="{innerHTML: 'Microsoft Corporation<br><span></span>'}"
style="margin-left: 40px;"><a href="">Microsoft</a>

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: myContentElement}">
    <a>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 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 could provide any DOM element as content, even with WinJS controls inside. The
                tooltip control will re-parent the element to the tooltip container, and block interaction
                events on that element, since that's not the suggested interaction model.</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.

For the complete code, see the HTML Tooltip control sample.


Minimum WinJS version

WinJS 1.0



See also

HTML Tooltip control sample