Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

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

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

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

Всплывающие подсказки на jQuery для ссылок

Опубликовано: 01.09.2018

видео Всплывающие подсказки на jQuery для ссылок

Всплывающие подсказки с помощью CSS

Tooltip (подсказка), может иметь самые различные стили оформления и способы реализации. За основу могут браться атрибуты ссылок, к примеру, как здесь , или использования чистого CSS кода, в примере контекстной справке . На этот раз всплывающая подсказка для ссылок сделана также с учетом атрибута, а именно rel.



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


Как сделать всплывающее окно для отправки формы

Посмотреть Demo

Установка Tooltip

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


Sublime Text - установка плагина JavaScript Completions. Плагин JavaScript Completions

<script> $( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); tooltip = $( '<div id="tooltip"></div>' ); if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); var init_tooltip = function() { if( $( window ).width() < tooltip.outerWidth() * 1.5 ) tooltip.css( 'max-width', $( window ).width() / 2 ); else tooltip.css( 'max-width', 340 ); var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ), pos_top = target.offset().top - tooltip.outerHeight() - 20; if( pos_left < 0 ) { pos_left = target.offset().left + target.outerWidth() / 2 - 20; tooltip.addClass( 'left' ); } else tooltip.removeClass( 'left' ); if( pos_left + tooltip.outerWidth() > $( window ).width() ) { pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20; tooltip.addClass( 'right' ); } else tooltip.removeClass( 'right' ); if( pos_top < 0 ) { var pos_top = target.offset().top + target.outerHeight(); tooltip.addClass( 'top' ); } else tooltip.removeClass( 'top' ); tooltip.css( { left: pos_left, top: pos_top } ) .animate( { top: '+=10', opacity: 1 }, 250 ); }; init_tooltip(); $( window ).resize( init_tooltip ); var remove_tooltip = function() { tooltip.animate( { top: '-=10', opacity: 0 }, 250, function() { $( this ).remove(); }); target.attr( 'title', tip ); }; target.bind( 'mouseleave', remove_tooltip ); tooltip.bind( 'click', remove_tooltip ); }); }); </script>

И, как всегда, для работы скрипта нужно подключение библиотеки jQuery, если ранее вы ее не подключали.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

#tooltip { background: rgba(33, 32, 38, 0.9) none repeat scroll 0 0; border-radius: 3px; color: #fff; padding: 8px 10px; position: absolute; text-align: center; z-index: 100; } #tooltip::after { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid rgba(33, 32, 38, 0.9); bottom: -7px; content: ""; height: 0; left: 50%; margin-left: -7px; position: absolute; width: 0; } #tooltip.top::after { border-bottom: 7px solid rgba(33, 32, 38, 0.9); border-top-color: transparent; bottom: auto; top: -14px; } #tooltip.left::after { left: 10px; margin: 0; } #tooltip.right::after { left: auto; margin: 0; right: 10px; }

В последнем шаге вам остается указать атрибут rel="tooltip" ссылкам, которым необходимо сделать всплывающие подсказки. Пример использования:

<a href="#" rel="tooltip" title="всплывающая подсказка"/>Текст ссылки</a>

Всплывающая подсказка с тегом abbr

Кроме ссылок, скрипт поддерживает тег аббревиатуры abbr, где, возможно, даже внутри атрибута title добавить некоторые свойства, к примеру, жирный текст, курсивный текст. Пример использования:

<abbr rel="tooltip" title="Демо просмотр <strong>CSS and jQuery Tooltip: Responsive, Mobile-Friendly</strong>">Текст</abbr>

Источник:

rss