Начало статьи смотрите здесь Добавляем всплывающие подсказки на 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. НЕ стесняйтесь изменять код и пробовать добавлять всплывающие подсказки в другие области сайта.
