Я пытаюсь сделать в Thymeleaf компонент tooltip и когда я его добавляю то он должен смотреть под себя и если там есть какой-то объект(компонент, input, p, svg...) то при наведении на этот объект tooltip покажется.
Это изначальный код:
$('.custom-tooltip').mouseenter(function () {
const $tooltipText = $(this).find('.tooltip-text');
const rect = $tooltipText.get(0).getBoundingClientRect();
const viewportHeight = $(window).height();
if (rect.top < 0 || rect.bottom > viewportHeight) {
$tooltipText.addClass('below');
} else {
$tooltipText.removeClass('below');
}
$(this).mouseleave(function () {
$(this).find('.tooltip-text').removeClass('below');
});
});
Это как я пытался реализовать но не получилось
$('.custom-tooltip').mouseenter(function () {
const $tooltipText = $(this).find('.tooltip-text');
const rect = $tooltipText.get(0).getBoundingClientRect();
const viewportHeight = $(window).height();
if (rect.top < 0 || rect.bottom > viewportHeight) {
$tooltipText.addClass('below');
} else {
$tooltipText.removeClass('below');
}
$(this).mouseleave(function () {
$(this).find('.tooltip-text').removeClass('below');
});
});
$('.custom-tooltip').each(function(){
const $tooltip = $(this);
const $elementToBeHoveredOver = $tooltip.next();
if($elementToBeHoveredOver.length === 0){
console.error('Tooltips must be next ( have below) element above/below which is hovering!');
}else if($elementToBeHoveredOver.hasClass('custom-tooltip')){
console.error('Tooltips cannot be next to each other!');
}
});
Стили
.custom-tooltip {
position: relative;
display: inline-block;
width: fit-content;
text-decoration: underline;
&:hover{
.tooltip-text{
visibility: visible;
opacity: 1;
}
}
.tooltip-text {
visibility: hidden;
background-color: black;
color: white;
text-align: center;
border-radius: 20px;
padding: 8px 12px;
position: absolute;
z-index: 100;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
box-shadow: 0 2px 8px rgba(26, 26, 26, 0.5);
min-width: 120px;
width: fit-content;
max-width: 280px;
word-wrap: anywhere;
overflow-wrap: anywhere;
hyphens: auto;
opacity: 0;
user-select: none;
&::after {
content: "";
width: 10px;
hyphens: auto;
height: 10px;
background-color: black;
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(45deg);
bottom: -5px;
z-index: -1;
}
&.below {
bottom: auto;
top: 100%;
transform: translateX(-50%) translateY(10px);
&::after {
top: -5px;
bottom: auto;
}
&.right, &.left{
transform: translateX(-50%) translateY(15px);
}
}
&.left {
transform: translateX(-30%) translateY(-10px);
&::after {
left: 19%;
bottom: -4px;
}
}
&.right {
transform: translateX(-70%) translateY(-10px);
&::after {
left: 80%;
bottom: -4px;
}
}
}
}
@media screen and (min-width: 768px){
.custom-tooltip {
.tooltip-text {
max-width: 300px;
width: max-content;
}
}
}
<div class="row">
<div class="col-12">
<tc:tooltip tooltipText="|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.|"></tc:tooltip>
<anyhtmltag>My html tag</anyhtmltag> <!-- При наведении на этот обьект должен показаться tooltip над/под ним -->
</div>
</div>