Como poner Tooltips de ayuda en una forma de Zend_Form usando Dojo

Mayo 19th, 2009 | Published in PHP, Zend Framework, Zend_Form | 3 Comments

Existen situaciones en las que un label en una forma no es sucifiente para explicar lo que quieres que el usuario capture en el campo… hay que dar una mejor explicacion,

una idea es poner iconos de ayuda enseguida de los campos y sacar un tooltip con la explicacion del campo.

El tip original lo obtuve de un blog Aleman aqui: http://www.scriptblogger.de/dijit-tooltips-und-zend_form-213.html

Pero aqui va una version en español con algunas modificaciones.

Tengo mi forma en una clase que extiende a Zend_Form y en los elementos que quiero que tengan un icono de ayuda les pongo un label y una description de la siguiente forma (mas abajo explico de donde viene):

class Mi_Forma extends Zend_Form {
 
	public function __construct($options = null)
	{
		$view = Zend_Layout::getMvcInstance()->getView();
		parent::__construct($options);
		Zend_Dojo::enableForm($this);
 
		$this->addElement('text', 'nombre', array(
			'label'		=> $view->instructionTooltip('Nombre', 'nombreAyuda', 'label'),
			'description' => $view->instructionTooltip('Escribe tu nombre aqui', 'nombreAyuda', 'description')
		));
	}
 
}

Si se fijan, el label y la description estan mandando llamar a un Helper de la vista, el Helper es este:

class Mi_View_Helper_InstructionTooltip {
 
	public $view;
 
	public function setView(Zend_View_Interface $view)
	{
		$this->view = $view;
	}
 
	public function instructionTooltip($text, $id, $mode = 'label')
	{
		if ($mode == 'label') {
			return $text . '<span id="' . $id . '" class="formaAyuda">?</span>';
		}
		if ($mode == 'description') {
			return '<span dojoType="dijit.Tooltip" style="display:none;" connectId="' . $id . '" id="' . $id . '_tooltip">' . $text . '</span>';
		}
	}
 
}

Ahora, hay que poner unas clases en nuestro CSS

.formaAyuda {
	font-size:0.7em;
	font-weight:normal;
	color:#0000FF;
	border:1px solid #7EABCD;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	margin-left:0.5em;
	margin-right:2em;
	padding-left:4px;
	padding-right:4px;
}