Положение исправлено - рядом с элементом, в то время как у нас есть опция прокрутки ⇐ Javascript

[Anonymous]

// JS Code:

document.addEventListener("DOMContentLoaded", function () {
const container = document.getElementById("autoToggleContainer");
const leftArrow = document.getElementById("left-arrow");
const rightArrow = document.getElementById("right-arrow");

// Scroll 200px left/right
leftArrow.addEventListener("click", () => {
container.scrollBy({ left: -200, behavior: "smooth" });
});

rightArrow.addEventListener("click", () => {
container.scrollBy({ left: 200, behavior: "smooth" });
});

// Tooltip behavior
$(".autoToggle__switch").hover(function () {
const tooltip = $(this).find(".auto-toggleTooltip");
const offset = $(this).offset();
const height = $(this).outerHeight();

tooltip.css({
top: offset.top + height + 10,
left: offset.left,
display: "block"
});
}, function () {
$(this).find(".auto-toggleTooltip").hide();
});

// Optional: scroll active button into view on load
const activeBtn = container.querySelector(".autoToggle__switch.active");
if (activeBtn) {
activeBtn.scrollIntoView({ behavior: "smooth", inline: "center" });
}
});
document.getElementById("left-arrow").addEventListener("click", function () {
document.getElementById("autoToggleContainer").scrollBy({ left: -200, behavior: "smooth" });
});

document.getElementById("right-arrow").addEventListener("click", function () {
document.getElementById("autoToggleContainer").scrollBy({ left: 200, behavior: "smooth" });
});
< /code>
// HTML Code:






@foreach (var item in Model.PastYearInfo)
{

@item.Name
Year @item.IdString

}





< /code>
This is the screenshot of output

• Here we are using postion:fixed; for tooltip because parent element has arrow icons so using overflow hidden.
• tooltip are showing properly but after clicking next button tooltip position showing same location when loading the page Screenshot added
• I have tried many ways but not working

Подробнее здесь: https://stackoverflow.com/questions/795 ... ing-option