Можно ли изменить вид всплывающей подсказки? Принцип работы всплывающей подсказки Все сведенья о событиях мышки

Нынче в свете веяний WEB 2.0 стало модным добавлять на сайты всякие "фишки". Реализуются они, как правило посредством JavaScript библиотек. И попросила моя программерская душа сотворить чего нибудь такого вэбдванольногона JavaScript, но без использования какой либо библиотеки, на чистом, так сказать языке. И вот в процессе моего обучения этому удивительному языку родил я на свет такой скрипт: показывает он подсказки в облачке, при наведении на тот, или иной элемент. Аналог JQuery tooltip или tip - не помню точно.

Скрипт реализован автономным модулем, кроме своего имени не добавляет в глобальную область ни каких других переменных, неплохо сжимается компрессором и судя по тестам sIEve - память через него в IE6 не утечёт.

Инструкция: Нужно просто вызвать функцию подсказки, как конструктор, передав ей следующие параметры:

Обязательный. Глобальный контекст или в браузере ссылку на объект window.

Обязательный. NodeList элементов (например getElementsByTagName("DIV")), или ссылку на элемент, на котором нужно выводить подсказку (например getElementById("tip-div")).

Необязательный. Объект с настройками стилей вроде того:
{background: "yellow", border: "solid 1px green"}

Необязательный. Объект с настройками смещения облака по оси X и Y типа того:
{ x: 20, y: -20 } - объект должен содержать эти два свойства

Пример использования:

Window.onload = function() { // Запускаем подсказки: new Tip(window, document.getElementsByTagName("a"), { borderRadius: "10px", background: "yellow", border: "solid 1px green", color: "green", padding: "10px" }, {x: 20, y: -20}); }

Конечно скрипт подсказки можно усовершенствовать и добавить к облачку "ножку", но мне не хотелось усложнять его, я думаю вы и сами сможете сделать это, если понадобится. Ещё скрипт жёстко ставит обработчики событий mouseover и mouseout - путём присваивания функций соответствующим свойтсвам напрямую. Поэтому всё же остаётся вероятность конфликтов в этом месте, но всё поправимо, как я уже указывал в одном из предыдущих постов можно сделать "композицию" с объектом который . В общем кому потребуется/понравится - пользуйтесь наздоровье.

Скрипт подсказок листинг (он не такой уж большой. В нём больше комментариев):

Function Tip(GLOBAL, elements, styles, offset) { // Страховка необязательных аргументов: if (!offset) { offset = {x: 50, y: -10} } if(!styles) { styles = {}; } // Объявляем переменные и зависимости var DOC = GLOBAL.document, length = elements.length, tipDiv, prop, i; // Добавляем html-элемент подсказки: function addTip(element,div,textTip) { // Позиция дожна быть абсолютной: div.style.position = "absolute"; // Перегоняем значения из объекта настроек стилей: for (prop in styles) { if (styles.hasOwnProperty(prop)) { div.style = styles; } } // Добаляем элемент подсказку в дерево DOM element.parentNode.appendChild(div); // Добавляем текст в div подсказки // Здесь сделано именно так, что бы избежать // Утечек памяти в IE6 div.appendChild(textTip); return div; } // Раздаём пирожки (обработчики событий) // @parament element - ссылка на html - элемент. function addHandlers(element) { // Создаём div для подсказки: var div = DOC.createElement("DIV"), // Задаём текст для подсказки - берём его из атрибута title textTip = DOC.createTextNode(element.tempTitle); // Обработчик события наведения мыши: function mouseOver() { tipDiv = addTip(element,div,textTip); // Высчитываем положение облачка: tipDiv.style.top = element.offsetTop + offset.y - tipDiv.offsetHeight + "px"; tipDiv.style.left = element.offsetLeft + offset.x + element.offsetLeft + "px"; } // Обработчик события съезда мыши: function mouseOut() { tipDiv.parentNode.removeChild(tipDiv); tipDiv = null; } // Назначаем обработчики событий: element.onmouseover = mouseOver; element.onmouseout = mouseOut; } // Если elements - это NodeList if (elements.item) { // Проходимся по заданным элементам: for (i = 0; i

Speech Bubbles Tooltip позволяет добавлять всплывающие подсказки, текст которых содержится либо в атрибуте title ссылки, либо представлен в виде HTML текста в отдельном файле, который подгружается с помощью AJAX. Стиль вывода подсказок не использует никаких изображений, только приемы CSS.

Speech Bubbles Tooltip использует скругленные углы и тени CSS3. подсказки отлично выглядят в FF3+, Opera 9+, и Google Chrome/ Safari 4+. В IE7 и IE8 подсказки сохраняют свою функциональность без эффектов CSS3.

Использование. Шаг 1.

Добавляем следующий код в секцию head страницы, на которой нужно организовать подсказки:

jQuery(function($){ //По наступлению события document.ready //Применяем подсказки для ссылок с классом "addspeech", а текст для подсказок будем искать в файле "speechdata.txt" $("a.addspeech").speechbubble({url:"speechdata.txt"}))

В данном коде используются три файла, которые можно найти в архиве со скриптом (speechbubbles.css , speechbubbles.js и speechdata.txt ). По умолчанию, они размещаются в том же каталоге, что и веб страница.

Шаг 2.

В HTML коде установить для ссылок с подсказками класс addspeech и значение атрибута rel, которое соответствует тексту нужной подсказки в файле speechdata.txt

Например, "Создание пользовательской панели опций в Wordpress".

По умолчанию скрипт устанавливает всплывающие подсказки для всех ссылок с классом addspeech . При инициализации скрипта устанавливается файл, из которого будут загружаться подсказки (смотри шаг 1).

Стиль вывода подсказок устанавливается с помощью CSS кода файла speechbubles.css .

Два способа задания текста подсказок

Существует два способа задания текста для подсказок:

Способ 1.

Текст подсказки устанавливается в качестве значения атрибута title ссылки с классом addspeech :

Текст ссылки

Скрипт автоматически будет использовать значение атрибута title для подсказки.

Способ 2.

Разметка подсказок подготавливается в другом файле (в примере это файл speechdata.txt ). Данный метод позволяет организовать централизованное хранение подсказок, что будет очень удобно при разработке растущего проекта.

Формат разметки подсказок следующий:

Пример подсказки №1. Пример подсказки №2. Выделяем часть текста. Пример подсказки №3. Пример подсказки №4.

Пример использования ссылки

В данном примере для подсказки будет использоваться текст элемента с id speechbubble1 из файла speechdata.txt .

Задача

Сделать всплывающую подсказку при наведении на картинку, оформление подсказки должно управляться через стили.

Решение

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

Для начала создадим пустой элемент с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства - position со значением absolute , оно задаёт абсолютное позиционирование элемента, display со значением none скрывает элемент и width задаёт ширину подсказки. Остальные свойства выступают по желанию разработчика и предназначены для изменения оформления слоя (пример 1).

Пример 1. Стиль для всплывающей подсказки

#floatTip { position: absolute; /* Абсолютное позиционирование */ width: 250px; /* Ширина блока */ display: none; /* Прячем от показа */ border: 1px solid #000; /* Параметры рамки */ padding: 4px; /* Поля вокруг текста */ font-family: sans-serif; /* Рубленый шрифт */ font-size: 9pt; /* Размер шрифта */ color: #333; /* Цвет текста */ background: #ffe5ff; /* Цвет фона */ }

Сам скрипт состоит из двух функций - moveTip отслеживает движение мыши и в соответствии с координатами курсора меняет положение элемента, и toolTip управляет видимостью элемента и выводит в нём желаемый текст (пример 2).

Пример 2. Скрипт для вывода слоя

Document.onmousemove = moveTip; function moveTip(e) { floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина подсказки // Для браузера IE6-8 if (document.all) { x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop; // Для остальных браузеров } else { x = e.pageX; // Координата X курсора y = e.pageY; // Координата Y курсора } // Показывать слой справа от курсора if ((x + w + 10) < document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; // Показываем подсказку floatTipStyle.display = "block"; } else { // Прячем подсказку floatTipStyle.display = "none"; } }

Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега . Окончательный код показан в примере 3.

Пример 3. Создание всплывающей подсказки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Всплывающая подсказка #floatTip { position: absolute; width: 250px; display: none; border: 1px solid #000; padding: 4px; font-family: sans-serif; font-size: 9pt; color: #333; background: #ffe5ff; }

Объектив: Canon EF 24-105 f/4L IS USM
Вспышка: Canon Speedlite 580 EX
Выдержка: 1/125
Диафрагма: 5.6")" onMouseOut="toolTip()">

Результат данного примера показан на рис. 1.

Рис. 1. Всплывающая подсказка, выводимая с помощью JavaScript

Tooltip (тултип) - всплывающая подсказка на html + javascript\jQuery

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

На самом деле реализация тултипов(tooltip) очень проста и не требует вмешательства каких-либо внешних плагинов, все намного проще. Элемент, к которому нужно выводить tooltip, необходимо отметить селектором и атрибутом, в котором будет находиться текст подсказки или даже html. При наведении на элемент текст подсказки будет размещен в блоке тултипа. Сам блок с помощью javascript/jQuery размещаем вблизи с исходным элементом. Остается только стилизовать tooltip.

Итак, приступим:

Размещаем html со следующим содержанием:

Супермен

Человек-паук

Железный человек

Халк

Стилизуем элементы и всплывающий тултип:

.tool-item{ /* элементы */ border-bottom: 1px dashed black; display button: inline-block; margin-right: 20px; cursor: pointer; } .tooltip-block{ /* тултип */ position: absolute; background: white; border: 1px solid rgb(230, 230, 230); padding: 5px 8px; font-size: 10px; width: 140px; line-height: 13px; color: rgb(82, 82, 82); z-index: 400; display button:none; }

Javascript/jQuery:

$(document).ready(function(){//страница загрузилась $(".tool-item").hover(function(){ //при наведении на элемент: var helptext = $(this).attr("data") //текст подсказки $(".tooltip-block").html(helptext).show(); //размещаем текст подсказки в блок тултипа и делаем его видимым //далее устанавливаем тултипу значения позиции с помощью абсолютного позиционирования: //позиция элемента сверху + высота элемента -> $(this).offset().top+$(this).height() //позиция элемента слева -> $(this).offset().left $(".tooltip-block").offset({top:$(this).offset().top+$(this).height(),left:$(this).offset().left}); },function(){ $(".tooltip-block").hide(); //скрываем тултип }); }); //в итоге подсказка окажется ровно под элементом наведения

Пример скрипта, который размещает tooltip справа от элемента наведения:

$(document).ready(function(){//страница загрузилась $(".tool-item").hover(function(){ //при наведении на элемент: var helptext = $(this).attr("data") //текст подсказки $(".tooltip-block").html(helptext).show(); //размещаем текст подсказки в блок тултипа и делаем его видимым //далее устанавливаем тултипу значения позиции с помощью абсолютного позиционирования: //позиция элемента сверху -> $(this).offset().top //позиция элемента слева -> $(this).offset().left+$(this).width()+5 $(this).offset().left$(".tooltip-block").offset({top:$(this).offset().top,left:$(this).offset().left+$(this).width()+5}); },function(){ $(".tooltip-block").hide(); //скрываем тултип }); }); //в итоге подсказка окажется справа от элемента наведения

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

Статью будет интересно прочитать как новичкам в работе с JavaScript, так и более или менее продвинутым в этом вопросе людям. Ее цель - ознакомление читателя с принципом работы JavaScript-подсказки. В конце статьи есть краткое описание всех объектов, событий и свойств, используемых в скрипте.

В начале ознакомления с HTML создается впечатление, что в нем всего достаточно, а где-то есть даже что-то лишнее. Но по мере накопления знаний и опыта начинают возникать вопросы, ответов на которые в учебниках нет. Один из таких вопросов звучит примерно так: "а как бы украсить всплывающую подсказку?".

Иногда возникают такие ситуации, что без всплывающей подсказки никак не обойтись, а стандартные alt и title не вписываются в дизайн сайта. Как раз в таких ситуациях спасают подсказки, написанные на JavaScript.

Итак, как реализуется такая подсказка?

Для на чала необходимо понять, что такое JavaScript-подсказка. А это всего навсего блок html-кода, который двигается за курсором мыши средствами JavaScript. Один из вариантов организации такого блока - использование тега . Например:

Параметр visibility установлен в hidden, т.к. изначально подсказка должна быть скрыта. Ширина этого блока 400 пикселей, а высота меняется в зависимости от содержимого и не меньше 10 пикселей. Также для визуального отделения подсказки от основного содержимого она обрамлена черной рамкой толщиной 1 пиксель.

Теперь нужно заставить подсказку появляться при наведении мыши на что-либо. Для примера она будет появляться и исчезать над картинкой:

То есть при наведении мыши на картинку будет вызвана функция movePic() со строковым параметром - текстом подсказки, - которая отобразит div-блок рядом с указателем мыши, а при удалении - hidePic(), которая спрячет его обратно.

function hidePic(){
//если чуть-чуть порыться в памяти или поднять глаза вверх, то можно понять, что myalt - имя блока.
myalt.style.visibility="hidden";//передача параметру visibility значения hidden, блок становится невидим
myalt.innerHTML="";//очищение содежимого блока
myalt.style.top=0;
myalt.style.left=0;//отправка блока в верхний левый угол экрана
}

//Теперь пришло время movePic():
function movePic(word){
myalt.innerHTML=word;//отправка в подсказку строки
myalt.style.left=window.event.clientX+5;
myalt.style.top=window.event.clientY+5;//блок находится на 5 пикселей правее и ниже курсора мыши
myalt.style.visibility="visible";//блок становится видимым
}

Этот вариант уже работает, но у него есть недостки:
- если документ прокручивающийся (как это обычно и бывает), то корректно подсказка будет работать только в верхрем положении экрана, так как clientX и clientY возвращают лишь относительные координаты мышки.
- если объект, над которым всплывает подсказка, расположен ближе к правому краю окна, то она вылезет за края экрана и страничка растянется.

Теперь пора исправлять недоделки. На самом деле все вышеперечисленные недостатки решаются очень легко:
- достаточно определить высоту прокрученной части документа
- проводится проверка на положение курсора относительно правого края.
- аналогично с нижним краем.

function movePic(word){
myalt.innerHTML=word;
_x=window.event.clientX;
_y=window.event.clientY;//сохранение координат курсора мыши в переменные
_dx=5;//смещение подскаки вправо и влево относительно координат мыши
//Определение, помещается ли подсказка между курсором и краями экрана
left=false;right=false;
if(_dx+_x+myalt.clientWidth>
if(_dx+_y+myalt.clientHeight>
//если объект в нижнем правом углу, подсказка всплывает над курсором
//помещение подсказки в найденные коородинаты
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;//смещение подскази в зависимости от высоты прокрученной части документа
myalt.style.visibility="visible";
}

Обычно делают подсказку, двигающуюся за курсором мыши. Достигается это следующим образом. Во-первых функцию нужно вызывать не onmouseover, а onmousemove, и во-вторых, строка, передаваемая в функцию movePic(), должна отправляться в тело подсказки только один раз (иначе могут возникнуть разного рода блики и прочее, особенно если в подсказке будет картинка). Ниже следует целиком код документа.

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

var hide=true;//глобальная переменная, отвечающая будет ли строка передана в подсказку
function movePic(word){
_x=window.event.clientX;
_y=window.event.clientY;
_dx=5
left=false;right=false;
if(_dx+_x+myalt.clientWidth>document.body.clientWidth){_x=document.body.clientWidth-myalt.clientWidth-_dx;left=true;}
if(_dx+_y+myalt.clientHeight>document.body.clientHeight){_y=document.body.clientHeight-myalt.clientHeight-_dx;right=true;}
if(left&&right)_y=document.body.clientHeight-myalt.clientHeight-_dx*4;
myalt.style.left=_x;
myalt.style.top=_y+document.body.scrollTop;
if(hide){
myalt.innerHTML=word;
myalt.style.visibility="visible";
hide=false;
}
}
function hidePic(){
myalt.style.visibility="hidden";
myalt.innerHTML="";
myalt.style.top=0;
myalt.style.left=0;
hide=true;
}

Справка:
window - объект, окно браузера;
window.event - объект, информация о событиях;
document - объект, веб-страница;
document.body - объект, тело веб-страницы;
style - объект, доступ к стилям объекта;
clientX, clientY - read-only свойства event, координаты мыши относительно рабочей области браузера;
innerHTML - read/write свойство, возвращает/устанавливает html-код между тегами объекта;
clientWidth, clientHeight - readn-only свойства, возвращают реальные ширину и высоту объекта соответственно;
scrollTop - read/write свойство, возвращает/устанавливает высоту прокрученной части объекта;
onmouseout - событие, происходящее при наведение курсора мыши над объектом;
onmousemove - событие, происходящее при движении курсора мыши над объектом;
onmouseout - событие, происодящее в момент убирания курсора мыши с объекта.