ToolTip jQuery & CSS / Tooltip / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Tooltip

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 267

Количество символов:

Посмотрели: 2635 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.2 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/NAY3DQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Bootstrap, подсказка, tooltip, подсказки, ToolTips, бутстрап

Поделился: BootstrapТема

Добавлено: 2015-12-06 в 15:37

Метка: 1582103506

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.css" />
<script type="text/javascript" src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>

<style>
body{background:rgb(165,132,202)}
</style>
<style>
#tooltip
{
 text-align: center;
 color: #fff;
 background: #111;
 position: absolute;
 z-index: 100;
 padding: 15px;
}
 
 #tooltip:after /* triangle decoration */
 {
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-top: 10px solid #111;
 content: '';
 position: absolute;
 left: 50%;
 bottom: -10px;
 margin-left: -10px;
 }
 
 #tooltip.top:after
 {
 border-top-color: transparent;
 border-bottom: 10px solid #111;
 top: -20px;
 bottom: auto;
 }
 
 #tooltip.left:after
 {
 left: 10px;
 margin: 0;
 }
 
 #tooltip.right:after
 {
 right: 10px;
 left: auto;
 margin: 0;
 }
</style>

<div class="container"><div class="row"><div class="col-xs-12">
<div class="text-center"><a href="#" class="btn btn-warning" title="Подсказка jQuery & CSS" rel="tooltip">Подсказка</a></div>
</div></div></div>

<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 }, 50 );
 };
 
 init_tooltip();
 $( window ).resize( init_tooltip );
 
 var remove_tooltip = function()
 {
 tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
 {
 $( this ).remove();
 });
 
 target.attr( 'title', tip );
 };
 
 target.bind( 'mouseleave', remove_tooltip );
 tooltip.bind( 'click', remove_tooltip );
 });
});
</script>