tooltips personalizados con Jquery UI

Con Jquery UI se pueden dar estilos al texto de información que se le añade a los atributos title de las etiquetas HTML, para ello se utiliza la utilidad tooptip(), es una forma de dar un estilo avanzado a los campos de información de los formularios por ejemplo.

En el siguiente ejemplo se puede ver como funciona tooltip(), agregándole un efecto a cada una de las etiquetas, para ello pasa el ratón por encima de cada uno de ellos ...

BLIND EFFECT

BOUNCE EFFECT

CLIP EFFECT

DROP EFFECT

EXPLODE EFFECT

FOLD EFFECT

HIGHTLIGHT EFFECT

PUFF EFFECT

PULSATE EFFECT

SCALE EFFECT

SHAKE EFFECT

SLIDE EFFECT

CSS ...

  .efecto-over{cursor: pointer;}
  .efecto-over:hover{font-weight: bold;}

Javascript ...

  $(function() {
    $( "#efecto-1" ).tooltip({
      show: {
        effect: "blind",
        delay: 250
      }
   }).addClass("efecto-over");
   
       $( "#efecto-2" ).tooltip({
      show: {
        effect: "bounce",
        delay: 250
      }
   }).addClass("efecto-over");
   
       $( "#efecto-3" ).tooltip({
      show: {
        effect: "clip",
        delay: 250
      }
   }).addClass("efecto-over");
   
       $( "#efecto-4" ).tooltip({
      show: {
        effect: "drop",
        delay: 250
      }
   }).addClass("efecto-over");
   
       $( "#efecto-5" ).tooltip({
      show: {
        effect: "explode",
        delay: 250
      }
   }).addClass("efecto-over");
   
       $( "#efecto-6" ).tooltip({
      show: {
        effect: "fold",
        delay: 250
      }
   }).addClass("efecto-over");
   
       $( "#efecto-7" ).tooltip({
      show: {
        effect: "highlight",
        delay: 250
      }
   }).addClass("efecto-over");
   
      
       $( "#efecto-8" ).tooltip({
      show: {
        effect: "puff",
        delay: 250
      }
   }).addClass("efecto-over");
   
      
       $( "#efecto-9" ).tooltip({
      show: {
        effect: "pulsate",
        delay: 250
      }
   }).addClass("efecto-over");
   
      
       $( "#efecto-10" ).tooltip({
      show: {
        effect: "scale",
        delay: 250
      }
   }).addClass("efecto-over");
   
      
       $( "#efecto-11" ).tooltip({
      show: {
        effect: "shake",
        delay: 250
      }
   }).addClass("efecto-over");
   
      
       $( "#efecto-12" ).tooltip({
      show: {
        effect: "slide",
        delay: 250
      }
   }).addClass("efecto-over");
  });

HTML ...

<p id="efecto-1" title="BLIND EFFECT">
BLIND EFFECT</p>
<p id="efecto-2" title="BOUNCE EFFECT">
BOUNCE EFFECT</p>
<p id="efecto-3" title="CLIP EFFECT">
CLIP EFFECT</p>
<p id="efecto-4" title="DROP EFFECT">
DROP EFFECT</p>
<p id="efecto-5" title="EXPLODE EFFECT">
EXPLODE EFFECT</p>
<p id="efecto-6" title="FOLD EFFECT">
FOLD EFFECT</p>
<p id="efecto-7" title="HIGHTLIGHT EFFECT">
HIGHTLIGHT EFFECT</p>
<p id="efecto-8" title="PUFF EFFECT">
PUFF EFFECT</p>
<p id="efecto-9" title="PULSATE EFFECT">
PULSATE EFFECT</p>
<p id="efecto-10" title="SCALE EFFECT">
SCALE EFFECT</p>
<p id="efecto-11" title="SHAKE EFFECT">
SHAKE EFFECT</p>
<p id="efecto-12" title="SLIDE EFFECT">
SLIDE EFFECT</p>