Recently, I created a small script that manages two lists of tasks - Finished/Active tasks. Users have the option to switch a task's list by clicking a button or view more details about the task by hitting "more info". A new div element is generated when the user clicks on "more info", which should follow its host element's Y position. However, I've encountered a bug where the tooltip jumps up and covers the task itself when scrolling. Here's an image showcasing the issue: enter image description here
The problem seems to occur whenever the scrollable elements scrollTop property isn't 0. Although, I'm confident that the creation process of the element is correct. Still, as I'm relatively new to coding and not very familiar with CSS/HTML, pinpointing the root cause has been challenging.
createTooltip() {
// Code snippet for creating tooltips
}
I am including the HTML and CSS snippets from the course instructor for context:
HTML Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head section content -->
</head>
<body>
<!-- Body section content -->
</body>
</html>CSS Snippet:
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
/* CSS styles go here */
#finished-projects header h2 {
color: white;
margin: 0;
}