Latest web development tutorials

jQuery UI API - élément de boîte infobulle (Tooltip Widget)

catégorie

Widgets (Widgets)

usage

Description: personnalisable, boîte de infobulle themable, remplacer la boîte de infobulle native.

Nouvelle version: 1.9

boîte de Tooltip (Tooltip) a remplacé la boîte de infobulle native, de sorte qu'ils puissent thématisation, permet également diverses personnalisations:

  • Afficher non seulement le titre de l'autre contenu, juste en bas de page ou en ligne par l'Ajax pour récupérer du contenu supplémentaire.
  • ciblage personnalisé, par exemple, centrée sur la boîte élément tooltip.
  • Ajouter des styles supplémentaires pour personnaliser l'apparence d'une région d'avertissement ou d'erreur.

Une animation dégradé par défaut pour afficher et masquer la boîte de infobulle, par rapport avec la simple commutation de la visibilité d'un tel aspect plus spirituel. Cela peut show et hide les options de personnalisation.

items et content options doivent suivre le rythme. Si vous modifiez un, vous aurez besoin de changer l'autre.

En général, les éléments désactivés ne déclenchent pas d'événements DOM. Par conséquent, un outil approprié pour contrôler l'élément de ballon désactivé est pas possible, parce que nous devons écouter les événements pour déterminer quand afficher et masquer la boîte de infobulle. Cela conduit à jQuery UI ne peut pas garantir un soutien pour l'élément désactivé attaché à la boîte de pointe de l'outil à tout niveau. Cela signifie que si vous avez besoin d'être invité pour les éléments handicapés, vous devrez peut-être utiliser un mélange de boîte ballon infobulle natif et jQuery UI.

theming

élément de boîte Tooltip (Tooltip Widget) en utilisant framework jQuery UI CSS pour définir l'aspect et la convivialité de son style. Si vous avez besoin d'utiliser la boîte de style infobulle spécifié, vous pouvez utiliser le nom de la classe CSS suivante:

  • ui-tooltip : info-bulle contenant extérieur.
    • ui-tooltip-content : infobulle contenu de la boîte.

Fiez

informations complémentaires

  • La partie exige une certaine CSS fonctionnelle, sinon cela ne fonctionnera pas. Si vous créez un thème personnalisé, utilisez le fichier CSS widget spécifié comme un point de départ.

Exemples

Utilisez tous les éléments avec l'attribut title du courtier de l'événement, pour créer une zone de la pointe de l'outil (Tooltip) sur le document. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> élément de boîte infobulle (Tooltip Widget) Demo </ 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="#" title="锚描述"> ancre texte </a>
  <Title Input = "Aide à la saisie">
</ P>
<Script>
  $ (Document) .tooltip ();
</ Script>
 
</ Body>
</ Html>

la