Tooltip 1.02

by velo_ninja

HTML

<!DOCTYPE html>
<html>

<head>
  <style>
    .containerMS {
      position: relative;
      display: inline-block;
      border: 1px dotted black;
    }
  </style>

  <script>
    //----------------[ CREATE-TOOLTIP ] -----------------------
    function create_tooltip(element) {
      const divTooltip = document.createElement('div');
      divTooltip.className = 'tooltip';
      divTooltip.textContent = 'Element-ID: ' + element.id;
      divTooltip.style.minWidth = '100px';
      divTooltip.style.maxWidth = '300px';
      divTooltip.style.height = 'auto';
      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.backgroundColor = 'rgba(0,0,0,0.8)';
      divTooltip.style.color = 'white';
      divTooltip.style.textAlign = 'center';
      divTooltip.style.borderRadius = '5px';
      divTooltip.style.padding = '5px';
      divTooltip.style.zIndex = '999';
      divTooltip.style.transition = 'transform 0.5s ease-in-out, opacity 0.8s ease-in-out';
      element.appendChild(divTooltip);
      //--------------------------------------------------
      const triangle = document.createElement('div');
      triangle.style.position = 'absolute';
      triangle.style.bottom = '-30px'; // Adjusted to position under the tooltip
      triangle.style.left = '40%';
      triangle.style.borderWidth = '15px';
      triangle.style.borderStyle = 'solid';
      triangle.style.borderColor = 'transparent transparent transparent black '; // Adjusted for 180° rotation
      triangle.style.transform = 'rotate(90deg)'; // Rotate the triangle 180 degrees
      divTooltip.appendChild(triangle);
      //--------------------------------------------------
     ...