Tooltip object
TOC
Réduire la table des matières
Développer la table des matières

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.

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>



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

Members

The Tooltip object has these types of members:

Events

The Tooltip object has these events.

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

 

Methods

The Tooltip object has these methods.

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

 

Properties

The Tooltip object has these properties.

PropertyDescription

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.

 

Remarks

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

win-tooltip

Styles the entire Tooltip.

 

Examples

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'}">
    <button>Next</button>
</div>

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.


.tooltipAnchor
{
    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>
<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>
        <div id="myContentElement_description">
            <p>
                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>
        <div id="myContentElement_picture">
        </div>
    </div>
</div>

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:


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

#myContentElement_rating 
{
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    padding: 10px;
}

#myContentElement_description 
{
    -ms-grid-column: 2;
    -ms-grid-row-span: 2;
    font-size: 10pt;
}

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

.win-rating.movieRating .win-star.win-average.win-empty
{
    color: rgba(0, 0, 0, 0.3);
}

.win-rating.movieRating .win-star.win-average.win-full
{
    color: rgb(33, 33, 33);
}

.win-rating.movieRating .win-star.win-user.win-empty
{
    color: rgba(0, 0, 0, 0.3);
}

.win-rating.movieRating .win-star.win-user.win-full
{
    color: rgb(53, 174, 67);
}

Requirements

Minimum supported client

Windows 8 Consumer Preview

Minimum supported server

Windows Server 8 Beta

Namespace

WinJS.UI

Library

Ui.js

 

 

Build date: 2/10/2012

Ajouts de la communauté

AJOUTER
Afficher:
© 2017 Microsoft