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

[Heidel]

К кнопкам соц.сетей такого вида

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


Решение:
Скрипт на jQuery

<sсript src="scripts/jquery-1.8.2.min.js"></sсriрt>
<sсript>
//Всплывающая подсказка
jQuery(document).ready(function(){
$(function() {
$('.l-cnt__side').on('mouseenter mouseleave','.b-roundBox .b-socials a.tooltip',function(e){
    if(e.type=='mouseenter'){
      var ObjOffSet=$(this).offset();
      $('#tooltipS').css({'top':(ObjOffSet.top+15),'left':(ObjOffSet.left+$(this).outerWidth()/2)}).show().find('.tooltip-tip-content').html($(this).attr('data-tooltip'));
    }else if(e.type=='mouseleave'){
      $('#tooltipS').hide().find('.tooltip-tip-content').html('');
    }
  });
});
});
</sсriрt>

html-код

<div class="l-cnt__side"> 
	<div class="b-roundBox">
                         <div class="b-socials">
				<a href="#" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-rss.png" alt=""></a>
				
				<div class="socials-group">
			
				<a href="http://vk.com/larson_holz_it_ltd" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-vk.png" alt=""></a>
				
				<a href="http://www.facebook.com/pages/LarsonHolz-It-Ltd/217822734979282" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-fb.png" alt=""></a>
				
				<a href="https://twitter.com/#!/Larson_Holz" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-t.png" alt=""></a>
				
				</div>
				
				<a href="" class="b-socials__link tooltip" data-tooltip="пояснительный текст"><img src="images/icon_social-photo.png" alt=""></a>
				
				<a href="" class="b-socials__link tooltip" data-tooltip="пояснительный текст">
				<img src="images/icon_social-heart.png" 
				onmouseover="this.src='images/icon_social-heart_new.png'"
                onmouseout="this.src='images/icon_social-heart.png'"
				alt=""></a>
							
			</div>
</div>
</div>

К ссылкам добавлен класс tooltip и атрибут data-tooltip="пояснительный текст", который содержит текст всплывающей подсказки.
Также в нижнюю часть страницы добавлена конструкция

<div id="tooltipS"><div class="tooltip-tip-content"></div></div>

Стили

/*Всплывающие подсказки над кнопками соц.сетей*/
#tooltipS {
	position: absolute;
	z-index: 999;
	display: none;
	}

	#tooltipS .tooltip-tip-content {
	position: relative;
	white-space: nowrap;
	background: url(../images/tooltip_background.png) no-repeat;
	width: 139px;
	height: 50px;
	color: #000000;
	font-family: Arial, sans-serif;
	font-size: 11px;
	padding-top: 18px;
	padding-left: 10px;
	left: -80%;
	}

Сделано по аналогии с сайтом http://sinoptik.ua/ (всплывающая подсказка над чувствуется как )

data-tooltip="как будет ощущаться<br /> температура воздуха<br /> человеком, одетым по сезону"

@темы: HTML, Верстка, CSS, jQuery, Ссылки