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

Спасибо ув-мым @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"] . Всплывающая подсказка по умолчанию будет снизу, если там нет места - сверху; когда недостаточно пространства как снизу, так и сверху - справа; ну и наконец, если ей некуда деться снизу, сверху и справа, она выведется слева.

За время съёмок ни одна всплывающая подсказка не выскочила за границу. В ещё более усложнённых моих реальных примерах с этим тоже порядок.

Всплывающая подсказка представляет собой короткое текстовое сообщение с пояснением, возникающие в результате наведения курсора мышки на элемент страницы. Далее рассмотрим как сделать всплывающую подсказку в html.

Стандартный способ

За показ подсказки отвечает {title}. Этот атрибут можно использовать для показа подсказки к разным объектам, но чаще всего его используют в качестве поясняющего текста к изображениям.

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

В качестве подсказки может использоваться как одно слово или словосочетание, так и сразу несколько предложений. Обычно всплывающая html подсказка выглядит следующим образом:

Поясняющий текст появляется не сразу после наведения мышки на изображение, а через пару секунд. Такая особенность всплывающих подсказок заложена по умолчанию.

Стандартная всплывающая html подсказка при наведении на текст имеет один существенный недостаток – отсутствие инструментов для стилизации. Чтобы решить эту проблему необходимо использовать другие способы создания всплывающей подсказки.

Способ на чистом css

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

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

Относительное позиционирование используется по причине того, что контейнер со всплывающей подсказкой будет позиционироваться абсолютно. Поэтому необходимо сделать так, чтобы текст позиционировался только относительно родительского блока, а не всей страницы.

#pdskzk{ position: relative; display: inline-block; }

Блочно-строчное отображение не помешает родительскому блоку (в том числе и контейнеру с со всплывающей подсказкой) растянуться на всю ширину окна. Теперь осталось создать поясняющий текст.

Всплывающие подсказки в css проще всего делать посредством псевдоэлементов:

#pdskzk:hover:after { content: attr(data-name); position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; }

Несмотря на обилие кода, он очень прост для понимания. Селектор #pdskzk:hover:after необходим для создания псевдоэлемента after в тот момент, когда пользователь ставит курсор на контейнер с изображением. Свойство content: attr(data-name) предназначено для указания текстового значения. Оно соответствует свойству, которое записано в атрибуте data-name у контейнера-обертки изображения.

После этого остается позиционировать объект абсолютно и задать ему необходимые параметры:

• Цвет;
• Шрифт и т.д.

Таким образом, получается такая всплывающая подсказка css при наведении на картинку:

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

Плавное появление

Тем не менее, возможности css позволяют использовать плавное появление подсказки. В этом случае не используются псевдоэлементы. Это обусловлено тем, что именно они не позволяют применить опцию плавного появления. Пример реализации плавного появления всплывающей подсказки на css представлен ниже:

Текст подсказки

Стоит заметить, что css-код практически не изменился:

#pdskzk2{ position: relative; display: inline-block; } #pdskzk2 .text { transition: all 0.6s; opacity: 0; position: absolute; left: 0; bottom: 0; background: rgba(5,13,156,.55); color: #fff; text-align: center; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; transform: scale(0); } #pdskzk2:hover .text{ opacity: 1; }

Ключевое изменение касается свойства content, которое не используется в этом примере. Оно потеряло актуальность ввиду того, что поддерживается только псевдоэлементами. Еще одно изменение – появление свойства transition. Именно это свойство отвечает за создание плавных переходов. Внимательный читатель наверняка обратил внимание на значение opacity: 0. Оно делает контейнер с подсказкой прозрачным.

Теперь при наведении на родительский блок достаточно вернуть стандартную прозрачность контейнеру с подсказкой. После этого можно проверить работу кода и убедиться в том, что поясняющий текст возникает на экране плавно.

CSS3 позволяет скрыть элемент и другими способами. Например, может использоваться трансформация. Этот метод предусматривает замену полной прозрачности на свойство transform: scale(0). Также необходимо уменьшить размер контейнера до 0. Таким образом, его не будет видно на странице. При наведении на контейнер с изображением нужно указать свойство transform: scale(1). Этот способ позволяет сделать появление всплывающего текстового сообщения не только плавным, но и эффектным.

Другие способы

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

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

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

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

Суть скрипта проста, определить положение курсора пользователя (положением курсора является отступы, по 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/ . Удачи Вам в Вашем обучения =)

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 .

Статью будет интересно прочитать как новичкам в работе с 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 - событие, происодящее в момент убирания курсора мыши с объекта.