Создаем собственные события при наведении мыши с помощью javascript кода. Всплывающие подсказки — html, JS, Bootstrap Способ на чистом css
Сделать всплывающую подсказку при наведении на картинку, оформление подсказки должно управляться через стили.
РешениеВсплывающая подсказка, добавляемая к изображениям через атрибут 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
Нынче в свете веяний WEB 2.0 стало модным добавлять на сайты всякие "фишки". Реализуются они, как правило посредством JavaScript библиотек. И попросила моя программерская душа сотворить чего нибудь такого вэбдванольногона JavaScript, но без использования какой либо библиотеки, на чистом, так сказать языке. И вот в процессе моего обучения этому удивительному языку родил я на свет такой скрипт: показывает он подсказки в облачке, при наведении на тот, или иной элемент. Аналог JQuery tooltip или tip - не помню точно.
Скрипт реализован автономным модулем, кроме своего имени не добавляет в глобальную область ни каких других переменных, неплохо сжимается компрессором и судя по тестам sIEve - память через него в IE6 не утечёт.
Инструкция: Нужно просто вызвать функцию подсказки, как конструктор, передав ей следующие параметры:
{background: "yellow", border: "solid 1px green"}
{ 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
Спасибо ув-мым @Blacknife, @Geyan и @dimaua, что потратили своё время на ответ к данному вопросу. Возможно, их решения не уступают в качестве, однако решил остановить свой выбор на JQuery-плагине Tooltipster . Поставленную в вопросе задачу он решает.
Мини-обзор- Достоинства - широкие возможности по кастомизации, см. сайт плагина . Кроссбраузерный, не тормозит показ страницы.
- Недостаток - на этом же офсайте напрочь отсутствуют примеры вида Код - Результат, поэтому придётся убить немного времени на освоение. Впрочем, ряд демо приведён в одной статье на русском .
Tooltipster не выбрасывает тултипы за окно, не только когда они простейшие. В демонстрируемом примере появляются отличные друг от друга всплывающие подсказки при наведении курсора и клике на икону с персонализированным оформлением и установлено время, в течение которого будет виден тултип - http://codepen.io/Kristinita/pen/RGzVmK .
$(document).ready(function() {
var $SashaElement = $(".SashaTooltip");
$SashaElement.tooltipster({
content: "Может, это ветерок Твои губы колышет",
theme: ["tooltipster-punk-customized"],
timer: 2000,
side: ["bottom", "top", "right", "left"]
});
$SashaElement.tooltipster({
content: "Может, это я кричу Тебе, но Ты меня не слышишь",
theme: "tooltipster-punk",
trigger: "click",
multiple: true,
timer: 2000,
side: ["bottom", "top", "right", "left"]
});
});
body {
background: gainsboro;
margin-top: 7rem;
padding-left: 7rem;
}
.tooltipster-sidetip.tooltipster-punk-customized .tooltipster-box {
border-radius: 5px;
border: none;
border-bottom: 3px solid orange;
background: #2a2a2a;
}
Что видим:
- Если текст всплывающей подсказки не помещается в одну строку, он переносится на следующую.
- Когда места на стороне света не остаётся, тултип появляется на другой. Отображение настраивается параметром side , в примере я задал ему значения ["bottom", "top", "right", "left"] . Всплывающая подсказка по умолчанию будет снизу, если там нет места - сверху; когда недостаточно пространства как снизу, так и сверху - справа; ну и наконец, если ей некуда деться снизу, сверху и справа, она выведется слева.
За время съёмок ни одна всплывающая подсказка не выскочила за границу. В ещё более усложнённых моих реальных примерах с этим тоже порядок.
Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши JavaScript.
Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!
Все сведенья о событиях мышкиДля мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице . Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.
Начнем с простогоДля начала познакомимся с простыми событиями. Их всего пять. Для удобства я поместил описание каждого инструмента в таблицу, прикрепленную ниже.
Наименование | Описание |
mousedown | Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена. |
mouseup | А этот срабатывает уже при отпускании зажатой ранее кнопочки. |
mouseover | Вызывается при наведении курсора на обрабатываемый объект. |
mouseout | Обрабатывает действие выхода курсора из области элемента. |
mousemove | Любое движение указателя над определенной областью вызывает текущее событие. |
Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.
Наведите на изображение курсор мыши и оно изменится.
А теперь отведите его в сторону и понаблюдайте за изменениями
function ChangeOver(x) {
x.src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg";
};
function ChangeOut(x) {
x.src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg";
}
Теперь давайте перейдем к комплексным видам. Каждый из таких событий включает в себя несколько простых. При этом все составные части комплексного события не срабатывают одновременно, а выстраиваются в очередь. Поэтому вы иногда могли наблюдать такую ситуацию, что при быстром кликанье по, к примеру, пунктам меню веб-сайта нажатия иногда не срабатывают.
Почему же так? Ответ достаточно прост.
Обработка событий происходит с какой-то максимально допустимой скоростью. И при этом не стоит забывать, что события обрабатываются по очереди. А значит при слишком быстром нажатии на разные элементы цепочка обработки может не выполниться полностью.
Итак, ниже перечислены составные события.Как вы уже поняли, комплексные события несколько упрощают жизнь разработчиков, включая в себя сразу набор необходимых простых event-ов. Вследствие этого на сегодняшний день никто не может представить обычной обработки кнопок или других элементов без того же click .
Для практического ознакомления с функционированием выше перечисленных событий я модифицировал предыдущее приложение. Проанализируйте результат моей работы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Пример наведения указателя на элемент страницы
![]() |
Пример наведения указателя на элемент страницы
Нажмите на меня один раз и смайл улыбнется!
А теперь нажмите на меня двойным кликом и смайл начнет двигаться!
Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!
function Smile() {
document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg";
};
function Cry() {
document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg";
};
function Move() {
document.getElementById("pic").src= "https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif";
};
Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.
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(); //скрываем тултип }); }); //в итоге подсказка окажется справа от элемента наведенияМожно фантазировать над стилизацией тултипа: добавить уголок, придать тень, эффекты открытия блока и так далее. Например, на нашем сайте вы можете увидеть тултип на левой панели, работа основана на той же идее, которую мы рассмотрели в данной статье.