Как добавить всплывающие подсказки на страницу Wordpress
Всплывающие подсказки — один из самых удобных, а порой даже необходимых, инструментов для добавления разъяснений на сайт. Они появляются при наведении или клике на фразу/слово. Поэтому их можно использовать для указания дополнительной информации, которая нужна, но не является основной.
Преимущества всплывающих подсказок очевидны: начиная с того, что вы можете дать расшифровку аббревиатур, заканчивая выводом мини-справки о чем бы то ни было.
Установка плагина
Безусловно, плагин Tooltipster, отвечающий за данную опцию, — не первый плагин, который мы добавим сразу после установки движка на хостинг https://s-host.com.ua/, но и обходить его стороной также не стоит.
Установите и активируйте плагин Tooltipster на странице "Консоль"/"Плагины"/"Добавить новый". Обратите внимание на то, что данное расширение не имеет дополнительных настроек. По сути, вы можете использовать его сразу же после установки.
Кроме того, как вы наверняка заметили, после добавления Tooltipster ни в админпанели, ни в текстовом редакторе не добавились новые пункты. Дело в том, что данный плагин работает при помощи набора шорткодов, которые добавляются непосредственно в текст.
Добавление всплывающих подсказок
Возникает закономерный вопрос: где найти шорткоды? Все очень просто. Перейдите на страницу "Консоль"/"Плагины"/"Установленные" и кликните на кнопку "Детали" напротив плагина Tooltipster:
Воспользуйтесь тем или иным шорткодом в зависимости от ваших целей. Например, так будет выглядеть простой шорткод, где вместо Your Tooltip text here нужно вписать свою подсказку:
Для того, чтобы добавить всплывающую подсказку с определенным заголовком и форматом размещения текста, воспользуйтесь вторым шорткодом (Add content with title, position):
- впишите заголовок в tooltip title="...";
- впишите позицию в position="...";
- впишите текст подсказки в text="...":
Выбирая третий шорткод, вы сможете воспользоваться еще большими возможностями. Например, вы можете добавить изображение во всплывающую подсказку. Здесь представлены следующие возможности:
- tooltip title="..." (заголовок);
- trigger='...' (формат вывода подсказки: по умолчанию установлен клик, однако если убрать этот параметр, подсказка будет всплывать при наведении курсора);
- position="..." (формат размещения текста);
- image="..." (URL-изображения);
- theme="..." (тема подсказки, по умолчанию установлена tooltipster-light);
- text="..." (текст подсказки):
