Aqui está uma rápida dica de como aprimorar as mensagens de erro da validação de seus formulários no Magento e mostrá-las como uma tooltip.

Não há necessidade de nenhuma modificação no template, tudo o que você precisa fazer é editar seu arquivo CSS e atualizá-lo com um código customizado.

Abaixo segue um vídeo no qual é mostrado como isso funciona.

Quando a mensagem de erro é mostrada, o Magento cria divs com a classe “validation-advice”. Este á exatamente a classe que precisaremos alterar no arquivo CSS.
A mensagem precisa estar com posicionamento absoluto relativo á seu container, que no caso são os input-box.
Então, encontre a classe .validation-advice em seu arquivo css, e substitua com o código abaixo:

[css]
/* Form Validation */
.input-box {
position: relative !important;
}
.validation-advice {
background: #DB6D00;
bottom: -7px;
color: #fff;
font-size: 11px;
font-weight: bold;
line-height: 13px;
min-height: 13px;
padding: 10px;
position: absolute;
right: -150px;
width: 120px;
border-radius: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.validation-advice:after {
position: absolute;
left: -8px;
bottom: 8px;
content: " ";
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #DB6D00;
}
[/css]

Lembre-se que este código sobrescreve a classe “.validation-advice” e este tutorial foi implementado no tema padrão do Magento (default). Caso você esteja utilizando um tema diferente, é possível que este código não funcione a menos que seja adequadamente adaptado.