Как изменить стиль стандартного всплывающего окошка 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.
.tooltip {
    position:absolute;
    z-index:999;
    left:-9999px;
    background-color:#dedede;
    padding:5px;
    border:1px solid #fff;
    /*width:250px;*/
}

.tooltip p {
    margin:0;
    padding:0;
    color:#fff;
    background-color:#222;
    padding:2px 7px;
}
  1. Подключить библиотеку JQuery если она у вас еще не подключена.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1. Сам скрипт JavaScript на jQuery.
<script>
function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);

		if($(this).attr("title") != "" && $(this).attr("title") != undefined ){

		$(this).removeAttr("title").mouseover(function(){
				my_tooltip.css({opacity:0.9, display:"none"}).fadeIn(0);
		}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
		}).mouseout(function(){
				my_tooltip.fadeOut(0);
		});

		}
			
	});
}

$(document).ready(function(){
	 simple_tooltip("#site3kolonka a, #spiskom a, #interesnoe a","tooltip");
});
</script>

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

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

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

  1. Контейнер с классом для подсказки.
<div class="tooltip">
<p></p>
</div>

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

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

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

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

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

Внутренняя оптимизация сайта: работа с тегами title, мета-тегами, h1 и атрибутом alt

Как на поисковом рынке, так и в реальной жизни ценности играют ключевую роль. Но, к Читать далее

Десктопные эмуляторы для теста юзабилити мобильных версий сайтов

По данным статистического сервиса StatCounter, мобильные браузеры на фоне всех браузеров, установленных на различных типах Читать далее

Как создать сайт на компьютере с помощью платформы OpenServer

Обучение созданию сайтов - дело кропотливое, трудоёмкое, требующее многих затрат. Даже при условии использования юзабельных Читать далее

Основные термины, использующиеся в статистике посещаемости сайта

Интернет-статистика предоставляет вебмастерам довольно точные и подробные сведения относительно посещаемости сайта. При этом на странице Читать далее

Оцените Статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

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