Добавляем всплывающие подсказки на jQuery к форме комментирования. Часть 2

Начало статьи смотрите здесь Добавляем всплывающие подсказки на jQuery к форме комментирования. Часть 1

Теперь, когда мы создали файл для плагина, пришло время добавить немного jQuery. Открываем файл devise-tooltip.js и добавляем следующий код внутрь:

(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);

В этом коде #commentform является селектором, где jQuery будет отображать всплывающие подсказки, а .tooltip — часть контента, где мы определили позицию для самих всплывашек.

И, наконец, заключительный шаг, где мы добавим немного CSS в файл devise-tooltip.css. Просто скопируйте и вставьте этот код:

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

Можно свободно измениять код выше, дабы вписать всплывашки в общий дизайн вашего сайта.

Вот и все. Вы успешно создали плагин, который добавляет всплывающие подсказки на jQuery к форме комментирования WordPress. Теперь осталось только загрузить папку devise-comment-tooltips с вашего компьютера в директорию /wp-content/plugins/ на вашем сервере, используя FTP клиент типа Filezilla или Total Commander. После загрузки плагина, переходим на страницу Плагины в административной панели WordPress и активируем оного.

Надеемся, что статья помогла вам научиться добавлять всплывающие подсказки на jQuery к форме комментирования WordPress. НЕ стесняйтесь изменять код и пробовать добавлять всплывающие подсказки в другие области сайта.