Como Adicionar Tooltips jQuery ao Formulário de Comentários do WordPress

Comentários permitem que os usuários interajam com o conteúdo do seu site. É por isso que acreditamos que é importante estilizar o layout dos seus comentários e o formulário de comentários, para que sejam fáceis de usar e visualmente agradáveis. Recentemente, um usuário nos perguntou como eles poderiam adicionar tooltips jQuery ao formulário de comentários do WordPress. Pensamos que outros também poderiam achar isso útil. Neste tutorial, mostraremos como adicionar tooltips jQuery no formulário de comentários do WordPress.

Por Que Adicionar Tooltips jQuery?

Tooltips aparecem quando um usuário move o mouse sobre um item, geralmente fornecendo uma descrição sobre aquele item em particular. Neste tutorial, adicionaremos tooltips jQuery para mostrar dicas como, Por favor, use seu nome real nos campos do formulário de comentários.

Ao adicionar tooltips jQuery, você pode melhorar a experiência do usuário e deixá-la mais agradável.

Como Adicionar Tooltips jQuery

A primeira coisa que você precisa fazer é criar uma pasta na sua área de trabalho e nomeá-la wpb-comment-tooltips. Dentro desta pasta, você precisa criar estes três arquivos:

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

Use um editor de texto simples como o Bloco de Notas para criar esses arquivos. Depois de ter criado os arquivos, você precisa abrir wpb-comment-tooltip.php em um editor de texto. Copie e cole este código no arquivo:

<?php
/** 
Plugin Name: WPBeginner's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/

// Only load our scripts and style when a comment form is displayed

add_action( 'comment_form_before', 'wpb_comment_tooltips' );

function wpb_comment_tooltips() { 
wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);
}

// Modify comment form fields and add title attribute to form input fields
 
function alter_comment_form_fields($fields){
    $fields['email'] =  '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>';  
    $fields['url'] = '<p class="comment-form-url"><label for="url">' .
      __( 'Website', 'twentythirteen' ) . '</label>' .
      '<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>';  
	  $fields['author'] = '<p class="comment-form-author">' .
      '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>';
    return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>

No código acima, primeiro criamos um cabeçalho de plugin, dando a este plugin um nome e descrição. Depois disso, carregamos nosso arquivo JavaScript e CSS (veja nosso guia em como adicionar JavaScript e estilos no WordPress).

Também garantimos que esses arquivos sejam carregados apenas quando um formulário de comentários for exibido. Depois disso, modificamos o formulário de comentários padrão e adicionamos o atributo title nos campos de entrada. Este atributo title contém a mensagem que queremos que seja exibida na dica de ferramenta. Por exemplo, no campo autor, usamos:

title="Por favor, use seu nome real, sem palavras-chave."

Agora que você criou o arquivo do plugin, é hora de adicionar um pouco de jQuery. Abra o arquivo wpb-tooltip.js e adicione este código dentro dele:

(function($) {
$( "#commentform" ).tooltip({ position: {
	my: "center bottom-10",
        at: "center top",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

Neste código, #commentform é o seletor onde o jQuery exibirá as dicas de ferramenta e .tooltip é a parte do conteúdo onde definimos a posição para as dicas de ferramenta.

Agora, o passo final é adicionar um pouco de CSS no arquivo wpb-tooltip.css. Simplesmente copie e cole este código:

.ui-tooltip, .arrow:after {
    background: #356aa0;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px #356aa0;
	max-width:350px;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px #356aa0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

Sinta-se à vontade para modificar este arquivo CSS para atender às suas necessidades.

É tudo. Agora você criou com sucesso um plugin que adiciona dicas de ferramenta jQuery ao seu formulário de comentários do WordPress. Tudo o que você precisa fazer é carregar a pasta wpb-comment-tooltips do seu desktop para o diretório /wp-content/plugins/ no seu servidor web usando um cliente FTP como o Filezilla. Depois de carregar o plugin, vá para a página Plugins na área de administração do WordPress e ative o plugin.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar tooltips do jQuery ao formulário de comentários do WordPress. Encorajamos você a modificar este código e tentar adicionar tooltips em outros lugares. Por exemplo, veja como adicionamos depoimentos com tooltips ao nosso site. Para feedback e perguntas, por favor, deixe um comentário abaixo.