jQuery ToolTip : qTip 2

Download: http://craigsworks.com/projects/qtip2/download/

My config in $(function () { });

  if($('.registration').length) {
    $('.registration input[type=text], .registration input[type=password], .registration select').qtip({
      position: {
        my: 'bottom center', 
        at: 'top center'
      },
      show: {
        event: 'focus'
      },
      hide: {
        event: 'blur'
      },
      style: {
        tip: true,
        classes: 'ui-tooltip-dark'
      }
    });
  }

In the form class...

    // qtip2 i18n tooltips
    $widgetSchema = $this->getWidgetSchema();
    $formFormatter = $widgetSchema->getFormFormatter();
    $addToolTipsFor = array(
        'email', 'email2', 'password', 'password2',
        'billing' => array('name', 'country', 'zip', 'city', 'street', 'phone', 'vat_country', 'vat_number'),
        'shipping' => array('name', 'country', 'zip', 'city', 'street'),
        'contact' => array('name', 'phone')
    );
    foreach($addToolTipsFor as $key => $input) {
      if(is_array($input)) {
        foreach($input as $subinput) {
          if(isset($widgetSchema[$key][$subinput])) {
            $widgetSchema[$key][$subinput]->setAttribute('title', $formFormatter->translate($key.'_'.$subinput.'_tooltip'));
          } else {
            throw new sfException('No widget: '.$key.' '.$subinput);
          }
        }
      } else {
        if(isset($widgetSchema[$input])) {
          $widgetSchema[$input]->setAttribute('title', $formFormatter->translate($input.'_tooltip'));
        } else {
          throw new sfException('No widget: '.$input);
        }
      }
    }

My CSS:

.ui-tooltip, .qtip { font-size: 13px !important; line-height: 20px !important; }