API jQuery UI - Widget Info-bulle

Catégorie

Widgets

Utilisation

Description :Une info-bulle personnalisable et thématisable qui remplace l'info-bulle native.

Version ajoutée :1.9

L'info-bulle remplace l'info-bulle native, les rendant thématisables et permettant diverses personnalisations :

  • Afficher un contenu autre que le simple titre, comme des notes de bas de page en ligne ou du contenu supplémentaire récupéré via Ajax.
  • Positionnement personnalisé, par exemple, centrer l'info-bulle sur l'élément.
  • Ajouter des styles supplémentaires pour personnaliser l'apparence des zones d'avertissement ou d'erreur.

Par défaut, une animation de dégradé est utilisée pour afficher et masquer l'info-bulle, ce qui donne une apparence plus vivante par rapport à un simple basculement de visibilité. Cela peut être personnalisé via leshowethideoption.

itemsetcontentLes options doivent être maintenues synchronisées. Si vous en modifiez une, vous devez modifier l'autre en même temps.

En général, les éléments désactivés ne déclenchent aucun événement DOM. Par conséquent, il est impossible de contrôler correctement les info-bulles sur les éléments désactivés, car nous devons écouter les événements pour décider quand afficher et masquer l'info-bulle. Il en résulte que jQuery UI ne peut garantir aucun niveau de prise en charge des info-bulles attachées à des éléments désactivés. Cela signifie que si vous avez besoin d'info-bulles sur des éléments désactivés, vous devrez peut-être utiliser un mélange d'une info-bulle native et de l'info-bulle jQuery UI.

Thèmes

Le widget Tooltip utilisele framework CSS jQuery UIpour définir ses styles d'apparence. Si vous devez utiliser des styles spécifiques à Tooltip, vous pouvez utiliser les noms de classes CSS suivants :

  • ui-tooltip: Le conteneur extérieur de l'info-bulle.
    • ui-tooltip-content: Le contenu de l'info-bulle.

Dépendances

Notes supplémentaires

  • Ce widget nécessite du CSS fonctionnel, sinon il ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS spécifique au widget comme point de départ.

Exemples

Créer une info-bulle sur le document en utilisant la délégation d'événements pour tous les éléments avec un attribut title.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件（Tooltip Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>
  <a href="../index.html" title="锚描述">锚文本</a>
  <input title="输入帮助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

Autres extensions