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

Может статься так что вы захотите поменять на своем веб-сайте стиль и внешний вид, а так же поведение всплывающих подсказок, которые появляются при наведении курсора на текст, изображения и другие элементы html страницы, в которых установлен обычный атрибут 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;
}

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

3. Сам скрипт 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-для ссылок.

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

<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>.

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