Skip to content

Instantly share code, notes, and snippets.

@LyudmilaM
Created January 13, 2022 07:54
Show Gist options
  • Save LyudmilaM/d1a7048f512baa42ee768cef80f1f8b6 to your computer and use it in GitHub Desktop.
Save LyudmilaM/d1a7048f512baa42ee768cef80f1f8b6 to your computer and use it in GitHub Desktop.
Tooltip - подсказка, следующая за курсором - jQuery
/**** ВСПЛЫВАЮЩАЯ ПОДСКАЗКА для окон просмотра больше 500px *****/
function tipShowHide(){
$(".calendar_image").mousemove(function(e){
var x = e.offsetX;//по горизонтали
var y = e.offsetY;//по вертикали
var posTop = y - 5 + "px";
var posLeft = x - 5 + "px";
var id = $(this).attr("data-toolTit");
$("#toolT" + id).css({"top": posTop, "left": posLeft}).slideDown();
}).mouseout(function(){
var id = $(this).attr("data-toolTit");
$("#toolT" + id).slideUp();//.css({"top": "0px", "left": "0px"});
});
}
tipShowHide();
$window.on('resize', function () {
if ($window.width() > 500) {
tipShowHide();
} else {
$(".calendar_image").off("mousemove");// отменяем обработчик событий mousemove
}
});
<div class="calendar_all_wrapper">
<div class="calendar_img_wrapper">
<img class="calendar_image" src="img/gallery/calendars/calendar1.jpg" alt="" data-toolTit="1">
</div>
<div class="toolT" id="toolT1">Календарь с объемным изображением</div>
</div>
<div class="calendar_all_wrapper">
<div class="calendar_img_wrapper">
<img class="calendar_image" src="img/gallery/calendars/calendar2.jpg" alt="" data-toolTit="2">
</div>
<div class="toolT" id="toolT2">Календарь для компании Аркон Авто</div>
</div>
//КАЛЕНДАРИ
.calendar_all_wrapper
display: inline-block
position: relative
width: 300px
height: 200px
margin: 10px 30px
border: 1px solid #334551
&:hover
border: 2px solid #334551
.calendar_img_wrapper
width: 100%
height: 100%
overflow: hidden
perspective: 2000px
transform-style: preserve-3d
.calendar_image
position: relative
width: 100%
height: 100%
margin: 0px
transition: 0.5s
&:hover
cursor: pointer
//-moz-placeholder-webkit-transform: translate3d(0px, 0px, 900px)
//-ms-transform: translate3d(0px, 0px, 900px)
transform: translate3d(0px, 0px, 900px)
/* стилизуем подсказку */
.toolT
position: absolute
z-index: 5000
width: 200px
height: 100px
top: 0px
left: 0px
display: none
padding: 20px 30px 5px 20px
font-family: Arial, sans-serif
font-size: 16px
line-height: 1.4
color: #334551
font-weight: bold
font-style: italic
background-image: url(../img/gallery/calendars/yellow-2.png)
background-size: cover
background-repeat: no-repeat
pointer-events: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment