WinJS.UI.Tooltip object

Article
01/26/2017

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.

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

Share via