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
