Создаем собственные события при наведении мыши с помощью javascript кода. Принцип работы всплывающей подсказки Javascript всплывающая подсказка

Windows 7
31.12.2022

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 .

Нынче в свете веяний 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

    Все банально просто. У нас есть две области.

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

    Суть скрипта проста, определить положение курсора пользователя (положением курсора является отступы, по top и left, от края браузера в пикселях ) и присвоению этого положения для области подсказки. Область подсказка естественно должна являться абсолютно позиционированным объектом.

    Все довольно логично, не так ли? Осталось узнать каким способом определить положение курсора мыши. Ну не то что бы узнать, а использовать то, что нам предлагает jquery , а именно pageX и pageY .

    event.pageX , event.pageY - Содержит горизонтальную/вертикальную координату события от мыши относительно начала координат document, а именно от левого края страницы.

    Реализуем всплывающую подсказку на jquery

    Вывешу вам полный код страницы. У скрипта имеется комментарий, так что разобраться в нем не трудно.




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


    function moveM(step)
    {
    if(step == 0)//Режим показа области с подсказкой
    {
    //в самом скрипте используем обработчик событий mousemove (движение курсора по области)
    $("#bottom").mousemove(function(e)
    //функция будет пере запускаться каждый раз когда мы двигаем курсор мыши (благодаря mousemove)
    {
    //при запуске функции меняется стиль display на block, а так же
    //присваивается свойство left и top. Значения этих свойств определяется с помощью
    //pageX и pageY. Обратите внимание что...
    //...из значения e.pageX я вычитаю 305, это сделано для того что бы область с подсказкой была привязана
    //к курсору правым верхним углом.
    //...к e.pageY прибавляю 25, для того что бы область с подсказкой была чуть ниже курсора
    //(что бы курсор не накладывался на область с подсказкой)
    $("#txt").css({"display" : "block","left" : e.pageX-305+"px","top" : e.pageY+25+"px"});
    })
    }
    if(step == 1)//Режим скрытия области
    {
    $("#txt").css("display","none");//просто присваиваем к области свойство display:none
    }
    }


    #bottom
    {
    cursor:pointer;
    width:200px;
    margin:auto;
    margin-top:25%;
    border:1px solid #000;
    text-align:center;
    }
    #txt
    {
    display:none;
    border:1px solid #000;
    width:300px;
    padding:5px;
    position:absolute;
    }




    ?


    Текст подсказки который необходимо показать при наведение на знак вопроса


    Обратите внимание, что файл jquery подключен ссылкой на официальный сайт, то есть я его не скачивал.

    Заключение

    В общем то на этом все, ничего в коде сложного нет, так что юзайте на здоровье (если подобный скрипт Вам конечно понадобится =) )

    Всего Вам наилучшего! У меня на сегодня все!

    P.S.: Знаете что такое нейро - лингвистическое программирование? Простыми словами это манипуляция сознанием человека при помощи речи. Довольна полезная "вещь" если Вы собираетесь работать в сфере СМИ, ну или рекламы. Подробнее о НЛП Вы можете почитать на сайте http://enlp.info/ . Удачи Вам в Вашем обучения =)

    Спасибо ув-мым @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"; };

    Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.