Latest web development tutorials

jQuery Tooltip

jQuery Tooltip complemento reemplaza el cuadro de información sobre herramientas nativa, por lo que se pueden personalizar, sólo tiene que ajustar su contenido, la ubicación y la apariencia puede ser.

El plug-in es la versión actual 1.3 no ha sido actualizado desde hace mucho tiempo, se recomienda el cuadro de información sobre herramientas jQuery UI (información sobre herramientas) .

Para más detalles acerca de cuadro de información sobre herramientas jQuery UI (información sobre herramientas), consulte la documentación de la API elemento de caja sobre herramientas jQuery UI (información sobre herramientas del widget) .

Los ejemplos de demostración

jQuery Tooltip plug-in de demostración. 

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
 
 
</body>
</html>