Как изменить стиль стандартного всплывающего окошка Tooltip(подсказка), формируемого атрибутом title при помощи JQuery

Может статься так что вы захотите поменять на своем веб-сайте стиль и внешний вид, а так же поведение всплывающих подсказок, которые появляются при наведении курсора на текст, изображения и другие элементы html страницы, в которых установлен обычный атрибут title. Этот атрибут нужен для более конкретного пояснения, подсказки или описания элемента. И бывает так что он формируется автоматически при использовании некоторых плагинов или самим движком сайта.


Обычно он работает так: подводите курсор мыши к картинке или тексту, немного ждете и около курсора появляется подсказка со стандартным дизайном и поведением.

Стандартный title картинки

Но изменить стиль и поведение этой подсказки не всегда возможно с помощью обычных средств, вроде CSS. Так как за их отображение отвечает то ли интерфейс API операционной системы, то ли интернет браузера. Нет мы конечно можем создать отдельные классы стили со своими подсказками, но что если нам нужно поменять именно стандартные подсказки и не только стиль но и скорость и эффект отображения и место у курсора мыши, да еще и не во всех местах, а только в определенных блоках DIV.

К сожалению, сделать это по человечески не получится, но использовав JavaScript и библиотеку JQuery, можно обмануть систему и добиться более или менее интересного результата, используя не очень большое количество дополнительного кода на странице.

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

Несколько ссылок для информации.

Автор перевода статьи автора скрипта и оригинал источник:

habrahabr.ru/post/42997/

www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery

www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips

Что нужно сделать:

  1. Прописать стили для контейнера подсказки в файл style.css.

  1. Подключить библиотеку JQuery если она у вас еще не подключена.

  1. Сам скрипт JavaScript на jQuery.

Обратите внимание на значения fadeIn(0) и fadeOut(0) вы можете заменить их на 400 или другое для эффекта появления исчезновения. Значение нуль – мгновенно отображает подсказку.

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

Обратите внимание в конце скрипта в строке simple_tooltip() в скобочках описаны аргументы передающиеся функции. Тут вы можете указать, через запятую, какие именно блоки DIV с их ID включали вид именно вашей всплывающей подсказки. Например для DIV блока ID=”#spiskom” пробел a-для ссылок.

  1. Контейнер с классом для подсказки.

Самого контейнера видно не будет т.к. он скрыт в настройках css, после изменения в ксс обновите кеш браузера.

У автора этого скрипта во второй части более модифицированная версия с немного иным расположением и поведением. (www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery-part-2-smart-tooltips).

В целом этот вариант работает, но естественно не без косяков и странностей. Так же вы можете не указывать отдельные блоки/места в виде DIV, а назначить его работу для всех ссылок с тегом <a>. И тогда у всех ссылок(с описанием title(атрибут)) всплывающие подсказки будут такими какие вы их сделаете при помощи оформления стилей в CSS.

Особенность: Может возникнуть баг и даже не один – в виде отображения на подсказке стандартной подсказки, если title атрибут установлен не только в ссылке тега <a>, но и в картинке <img>.

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

0

Если Вам нравятся статьи, заметки и другой интересный материал представленный на сайте Белые окошки и у вас есть непреодолимое желание поддержать этот скромный проект тогда выберите один из двух видов стратегии поддержки на специальной странице - Страница с донатом

Поделиться в соц сетях:

Подпишитесь на обновления этого блога по RSS, Email или Twitter!

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

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

Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля