Всплывающие подсказки на jQuery для ссылок
01.09.2018
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>Источник: