Красивые всплывающие подсказки для сайта без плагинов



Всплывающие подсказки

Всплывающие подсказки для сайта без плагинов

Бывают ситуации, когда надо оформить вывод красивых всплывающих подсказок для ссылок. Их ещё называют Tooltip.

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

Я тоже так сделал, когда понадобилось настроить вывод этих подсказок для одного сайта. Да, вот только, все те варианты, которые предлагались не слишком устраивали. Всё, как-то обычно, стандартно. А хотелось бы чего-то пооригинальнее, повеселее. Плюс, в большинстве этих плагинов, при выводе изображений, не слишком корректно формируется наведение мышкой. Смотреть можно, а вот навести, ссылку вставить, управлять видео не получается.

Вот и пришлось заняться поиском, результатом которого я и хочу поделиться в этой статье.

Всплывающие подсказки для сайта без плагинов

Нашёлся весьма интересный вариант, где реализация вывода всплывающих подсказок сделана безо всяких дополнительных плагинов и скриптов. Нужно только прописать нужные стили для ссылок и текста, и можно наблюдать весьма интересный результат.

На мой взгляд, все эффекты достаточно приличные. Главное, позволяют добавить в tooltip нужное изображение и нужную ссылку, что может, порою, весьма пригодится. И ещё, немаловажный момент, все эти эффекты корректно отображаются во всех браузерах.

Теперь рассмотрим то, как это дело реализовать на своём сайте.

Настройка красивых всплывающих подсказок

Для начала нужно скачать общий архив со стилями вот по этой ссылке.

После распаковки в отдельную папочку вы увидите вот такую картину:

Всплывающие подсказки

Распакованные файлы со стилями для всплывающих подсказок

В файлах с расширением .html вы найдёте тот код, с помощью которого можно будет выводить код в статьях с нужных эффектом.

В папке CSS вы найдёте нужные файлы со стилями. Название эффекта, название файла, всё просто. Остаётся только подключить к своему сайту выбранный стиль.

Можно, конечно, подключить этот файл в хедере отдельно, но, какой смысл городить лишний код, можно просто добавить все эти стили в файл style.css вашей темы, в самом низу. Даже, если у вас уже были прописаны стили для tooltip, такой вариант присвоит им нужное значение. Тут, правда, надо помнить про эту процедуру во время обновления вашей темы.

Остаётся только прописать нужный текст и правильно оформить его тегами с выбранным эффектом.

Естественно, не слишком удобно постоянно прописывать довольно громоздкий код ручками, но, что делать, результат того стоит. Естественно, тем, кому этим делом заниматься не захочется, можно просто установить любой из плагинов с официального сайта WordPress. Правда, уже таких эффектов наблюдать не придётся.  :unsure:

Всем удачи и нестандартных творческих решений!  :bye:

@ ПОДПИСАТЬСЯ НА НОВОСТИ САЙТА

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

Поделиться:

Комментарии к «Красивые всплывающие подсказки для сайта без плагинов»

  1. Алексей:

    Здравствуйте. Что-то не понятно.

    Я создал несколько файлов .html (по количеству подсказок). Кинул их в корень.
    В тексте, где нужно вставить подсказку — пишу <span class=»tooltip-text»><a href=»ссылка на html файл»>Текст подсказки</a></span>

    Так не отображает. Что не так делаю?

    1. Алексей, приветствую.

      Тот подход, который вы описали не верен в принципе. Не будет отображаться сторонний файл, подсказка должна находится в самом тексте.

      Подключаете файл нужного стиля в хедере. Затем в тексте вставляете контейнер из нужного примера. Вариант classic — это всё, что находится в теге span class=»tooltip tooltip-effect-1″. Остаётся только заменить текст примера на нужный.

      Удачи!

  2. Влад:

    Добрый день! А какую строку кода менять, чтобы подсказка появлялась не как в примере, а при однократном нажатии? т.е. где сам файл скрипта чтобы сменить mouseover на click ? Спасибо.

    1. Влад, тут всё реализовано через css. Правятся только файлы стилей. Если заменить :hover на click работать не будет.

      Удачи! :bye:

  3. антон:

    Подскажите — я установил шаблон, и там по умолчанию «подсказки» на английском
    где я могу их в коде отключить или к примеру поменять текст на русский?

    1. Антон, все правки производятся в файлах с расширением .html. К примеру, по умолчанию идёт эффект classic, все нужные подсказки редактируются между тегами span class=»tooltip-text» в файле index.html. Все остальные эффекты редактируются в файлах со своим названием.

      Удачи! :bye:

  4. SxCodex:

    То что нужно! Спасибо автору!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:bye: 
:good: 
:za-nas: 
:wacko: 
:yahoo: 
:skromnost: 
:heart: 
:rose: 
:-) 
:yes: 
:cry: 
:mail: 
:unsure: 
;-)