<ul class="tooltip__wrapper mt-50">
<li class="tooltip__target" data-tooltip-text="テキスト1"><img src="https://picsum.photos/id/1/300/300"></li>
<li class="tooltip__target" data-tooltip-text="テキスト2"><img src="https://picsum.photos/id/10/300/300"></li>
<li class="tooltip__target" data-tooltip-text="テキスト3"><img src="https://picsum.photos/id/348/300/300"></li>
</ul>
<div class="tooltip"></div>
.tooltip {
position: absolute;
padding: 8px 16px;
background: #333;
color: #fff;
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s;
z-index: 1;
}
.tooltip::after {
position: absolute;
content: '';
width: 0;
border: 8px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.tooltip__wrapper {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
justify-content: space-between;
}
.tooltip__target {
width: calc((100% - 24px) / 3);
border-radius: 50%;
overflow: hidden;
}
.tooltip__target > img {
width: 100%;
}
.tooltip {
position: absolute;
padding: $space_sm $space_lg;
background: $color_main;
color: $color_opposite;
border-radius: $radius_sm;
opacity: 0;
transition: opacity $speed_fast;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 0;
border: 8px solid transparent;
border-top-color: $color_main;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
&__wrapper {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
justify-content: space-between;
}
&__target {
width: calc((100% - #{$space_md * 2}) / 3);
border-radius: 50%;
overflow: hidden;
& > img {
width: 100%;
}
}
}
(function() {
const body = document.body;
const targets = document.querySelectorAll('.tooltip__target');
if(!targets) {return;}
// tooltip要素の作成
const tooltipEl = document.createElement('div');
tooltipEl.classList.add('tooltip');
// 要素とtooltipの間隔
const tooltipTopOffset = 16;
let tooltipShowFlag = false;
transitionSet();
targets.forEach(target => {
target.addEventListener('mouseenter', () => {
tooltipShowFlag = true;
tooltipShow(target);
});
target.addEventListener('mouseleave', () => {
tooltipShowFlag = false;
tooltipHide();
});
});
function tooltipShow(el) {
// bodyに挿入
body.appendChild(tooltipEl);
// hoverした要素からtooltipの各値を設定（※bodyに挿入してからでないとtooltipの高さが取れない）
tooltipEl.innerText = el.dataset.tooltipText;
let clientRect = el.getBoundingClientRect();
tooltipEl.style.top = `${window.pageYOffset + clientRect.top - tooltipEl.clientHeight - tooltipTopOffset}px`;
tooltipEl.style.left = `${window.pageXOffset + (clientRect.left + clientRect.right) / 2 - tooltipEl.clientWidth / 2}px`;
setTimeout(() => {
tooltipEl.style.opacity = 1;
});
}
function tooltipHide() {
tooltipEl.style.opacity = 0;
}
function transitionSet() {
tooltipEl.addEventListener('transitionend', () => {
if(!tooltipShowFlag) {
// tooltipの各値をクリア
tooltipEl.style.opacity = '';
tooltipEl.style.top = '';
tooltipEl.style.left = '';
tooltipEl.innerText = '';
tooltipEl.remove();
}
});
}
}());