Created
January 13, 2022 07:00
-
-
Save LyudmilaM/d7edc28aebd20ef6b0ff70a84898dc5c to your computer and use it in GitHub Desktop.
Tooltip - подсказка, следующая за курсором - js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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 Прекрасный пейзаж летнего дня | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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 | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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