Tool-Tip-2

by velo_ninja

HTML

<!DOCTYPE html>
<html>

<head>
  <style>
    /* Keep the styling as a baseline */
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tooltips = document.querySelectorAll('.tooltip');

      tooltips.forEach(function (tooltip) {
        const tooltipText = document.createElement('span');
        tooltipText.textContent = 'Tooltip text und noch mehr informativer text';
        tooltipText.style.display = 'none';
        tooltipText.style.width = '120px';
        tooltipText.style.backgroundColor = '#555';
        tooltipText.style.color = '#fff';
        tooltipText.style.textAlign = 'center';
        tooltipText.style.borderRadius = '6px';
        tooltipText.style.padding = '30px';
        tooltipText.style.position = 'absolute';
        tooltipText.style.zIndex = '1';
        tooltipText.style.bottom = 'calc(100% + 10px)'; // Adjusted to position 10px above the element
        tooltipText.style.left = '50%';
        tooltipText.style.transform = 'translateX(-50%)'; // Center horizontally
        tooltipText.style.opacity = '0';
        tooltipText.style.transition = 'opacity 0.3s';
        tooltip.appendChild(tooltipText);

        const triangle = document.createElement('div');
        triangle.style.position = 'absolute';
        triangle.style.bottom = '-20px'; // Adjusted to position under the tooltip
        triangle.style.left = '50%';
        triangle.style.borderWidth = '10px';
        triangle.style.borderStyle = 'solid';
        triangle.style.borderColor = 'transparent transparent transparent #555 '; // Adjusted for 180° rotation
        triangle.style.transform = 'rotate(90deg)'; // Rotate the triangle 180 degrees
        tooltipText.appendChild(triangle);

        tooltip.addEventListener('mouseover', function () {
          tooltipText.style.display = 'block';
         ...