WinJS.UI.Tooltip object

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
  • Methods
  • Properties

Events

The Tooltip object has these events.

Event Description
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.

 

Methods

The Tooltip object has these methods.

Method Description
addEventListener Method

Adds an event handler for the specified event.

close Method

Hides the Tooltip.

dispose

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.

 

Properties

The Tooltip object has these properties.

Property Access type Description

contentElement Property

Read/write

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

element Property

Read-only

Gets the DOM element that hosts the Tooltip control.

extraClass

Read/write

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

infotip Property

Read/write

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

Read/write

Gets or sets the HTML content of the Tooltip.

placement Property

Read/write

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>www.microsoft.com</span>'}"
style="margin-left: 40px;"><a href="https://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: myContentElement}">
    <a>Box Office No. 1</a>
</div>
<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>
        <div id="myContentElement_description">
            <p>
                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>
        <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 WinJS version

WinJS 1.0

Namespace

WinJS.UI

See also

HTML Tooltip control sample