Mostrar a validação de erro de formulário do Magento como um tooltip

Show Magento form validation error messages in a tooltip

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:

/* 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;
}
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.

Leave A Reply

Navigate