Carousel-Menu 1.09

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centered Div</title>
    <link rel="stylesheet" href="styles.css">

    <style>
      :root {
        --cell-font-color: black;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }

      .carousel-options {
        text-align: center;
        position: relative;
        z-index: 2;
      }

    </style>

    <script>
      function xxx(parentDiv, src) {
        parentDiv.style.backgroundSize = 'cover';
        parentDiv.style.backgroundRepeat = 'no-repeat';
        parentDiv.style.backgroundPosition = 'center';
        parentDiv.style.backgroundImage = `url(${src})`;
      }

    </script>


    <script>
      //----------------[ CREATE-TOOLTIP ] -----------------------
      function create_tooltip(element, options) {
        const divTooltip = document.createElement('div');
        divTooltip.className = 'tooltip';
        divTooltip.style.minWidth = '100px';
        divTooltip.style.maxWidth = '500px';
        divTooltip.style.minHeight = '50px';
        divTooltip.style.width = options.tooltipWidth;
        divTooltip.style.height = options.tooltipHeight;
        divTooltip.style.position = 'absolute';
        divTooltip.style.top = `calc(-50%)`; // 10px above the related div
        divTooltip.style.left = `calc(50%)`; // Center horizontally
        divTooltip.style.transform = 'translate(-50%, 0)'; // Center horizontally
        divTooltip.style.visibility = 'hidden';
        divTooltip.style.opacity = '0';
        divTooltip.style.display = 'flex';
        divTooltip.style.flexWrap = 'wrap';
        divTooltip.style.alignItems = 'center';
        divTooltip.style.justifyContent = 'center';
        divTooltip.style.backgroundColor = options.tooltipBackgroundColor;
        divTooltip.style.color =...