Tooltip.contentElement property

  • Article

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

Syntax

<div data-win-control="WinJS.UI.Tooltip" data-win-options="{ contentElement : 'idOfContentElement'}" ></div>

var contentElement = tooltip.contentElement;
tooltip.contentElement = contentElement;

Property value

Type: HTMLElement

The HTML element that is the content of the Tooltip. When you set this property in HTML, provide the ID of another element on the page.

Examples

If you want your tooltip to contain 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

Tooltip