Windows Metro – Le composant WinJS.UI.Tooltip

Le composant Tooltip est assez différent des autres composants WinJS que vous avez pu voir comme Rating. En effet, celui-ci peut être intancié de plusieurs manières dans le DOM HTML.

Vous pouvez le mettre directement sur n’importe quel objet du DOM grâce à l’attribut data-win-control comme ceci

<targetElement data-win-control="WinJS.UI.Tooltip">
</targetElement>

Ou bien entourer l’élément cible par un nouvel élément spécifique pour le tooltip:

<span data-win-control="WinJS.UI.Tooltip">
 <!-- The element that gets the tooltip goes here -->
</span>

A noter que l’on peut aussi bien utiliser un div qu’un span.

Le composant Tooltip a une propriété « contentElement » qui va contenir une référence vers le contenu à afficher comme Tooltip. Vous pouvez ainsi le faire pointer vers un morceau de HTML masqué par défaut (comme les templates des ListView) qui va contenir un DOM complexe:

<div style="display: none;">
 <!--Here is the content element. It's put inside a hidden container so that it's invisible to the user until the tooltip takes it out.-->
 <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>

Et la référence dans le composant Tooltip:

<div data-win-control="WinJS.UI.Tooltip" data-win-options="{infotip: true, contentElement: myContentElement}">
  <span>My piece of data</span>
</div>

Liens utiles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *