Skip to content

Instantly share code, notes, and snippets.

@LyudmilaM
Created January 13, 2022 07:00
Show Gist options
  • Save LyudmilaM/d7edc28aebd20ef6b0ff70a84898dc5c to your computer and use it in GitHub Desktop.
Save LyudmilaM/d7edc28aebd20ef6b0ff70a84898dc5c to your computer and use it in GitHub Desktop.
Tooltip - подсказка, следующая за курсором - js
.imgBlock.hasTooltipBlock
img.imgBlock__img(src="img/test/image6.jpg" alt="Природа")
.imgBlock__tooltip.hasTooltipBlock__tooltip Прекрасный пейзаж летнего дня
.imgBlock.hasTooltipBlock
img.imgBlock__img(src="img/test/image6.jpg" alt="Природа")
.imgBlock__tooltip.hasTooltipBlock__tooltip Прекрасный пейзаж летнего дня
.imgBlock
position: relative
max-width: 400px
margin-bottom: 20px
&__img
display: block
width: 100%
height: auto
object-fit: cover
&__tooltip
position: absolute
top: 0
left: 0
z-index: 5000
padding: 10px
overflow: hidden
font-size: 18px
color: #fff
visibility: hidden
background-color: silver
border: 1px solid darkgrey
opacity: 0
transition: top .3s ease 0s, left .1s ease 0s, opacity .2s ease .3s, visibility .2s ease .3s
.imgBlock:hover .imgBlock__tooltip
visibility: visible
opacity: 1
.imgBlock:not(:hover) .imgBlock__tooltip
transition: opacity .2s ease 0s, visibility .2s ease 0s, top 0s ease .2s, left 0s ease .2s
(function () {
// Разметка html:
// блок с подсказкой - .hasTooltipBlock,
// подсказка - .hasTooltipBlock__tooltip
// В модальном окне от бутстрапа, index body окна
// скорее всего ниже, чем у footer, поэтому
// подсказка срезается, если находится внузу.
// Вариант - делать подсказку, чтобы родителем ее
// был body, использовать сразу posX, posY вместо x, y,
// добавлять величину прокрутки для posY.
function showTool(e) {
let timer;
let target = this.querySelector('.hasTooltipBlock__tooltip');
let offset = 5; // отступ от курсора по гориз. и вертик. одинаковый
let left = false;
let right = false;
clearTimeout(timer);
timer = setTimeout(function () {
let x = e.offsetX;
let y = e.offsetY;
let posX = e.clientX;
let posY = e.clientY;
// Если окно просмотра вплотную прилегает к блоку
// с подсказкой, то чтобы подсказка не срезалась,
// меняем ее положение
// TODO: НЕМНОГО НАДО ПОТЕСТИРОВАТЬ И МОЖЕТ, ДОРАБОТАТЬ
// Лучше для подсказки установить фиксированные
// высоту и ширину.
if((offset + posX + target.clientWidth) > document.body.clientWidth){
x = e.offsetX - target.clientWidth - offset;
left = true;
} else {
left = false;
}
if((offset + posY + target.clientHeight) > document.body.clientHeight){
y = e.offsetY - target.clientHeight - offset;
right = true;
} else {
right = false;
}
if(left && right){
y = e.offsetY - target.clientHeight - offset * 4;
}
target.style.left = x + offset + 'px';
target.style.top = y + offset + 'px';
target.classList.add('visible');
}, 100);
};
function hideTool(e) {
let target = this.querySelector('.hasTooltipBlock__tooltip');
target.classList.remove('visible');
target.style.top = 0;
target.style.left = 0;
}
let blocksWithTooltip = document.querySelectorAll('.hasTooltipBlock');
for(let i = 0; i < blocksWithTooltip.length; i++){
blocksWithTooltip[i].addEventListener('mousemove', showTool);
blocksWithTooltip[i].addEventListener('mouseleave', hideTool);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment