Clear all open tooltips and open new ones

A very specific request!

To clear all open tooltips and open new ones, you'll need to use a combination of JavaScript and CSS. Here's a possible solution:

HTML

<!-- Your tooltip container -->
<div id="tooltip-container"></div>

CSS

/* Hide all tooltips initially */
#tooltip-container.tooltip {
  display: none;
}

/* Style your tooltips as needed */
#tooltip-container.tooltip {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Style the tooltip arrow */
#tooltip-container.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

JavaScript

// Get the tooltip container
const tooltipContainer = document.getElementById('tooltip-container');

// Function to clear all open tooltips
function clearTooltips() {
  // Hide all tooltips
  tooltipContainer.querySelectorAll('.tooltip').forEach((tooltip) => {
    tooltip.style.display = 'none';
  });
}

// Function to open a new tooltip
function openTooltip(tooltipText, x, y) {
  // Create a new tooltip element
  const tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  tooltip.textContent = tooltipText;

  // Position the tooltip
  tooltip.style.top = `${y}px`;
  tooltip.style.left = `${x}px`;

  // Add the tooltip to the container
  tooltipContainer.appendChild(tooltip);

  // Show the tooltip
  tooltip.style.display = 'block';
}

// Example usage
clearTooltips(); // Clear all open tooltips
openTooltip('Hello, world!', 100, 100); // Open a new tooltip

In this example, we use a container element (#tooltip-container) to hold all the tooltips. We use CSS to style the tooltips and their arrows. The JavaScript code defines two functions: clearTooltips() to hide all open tooltips, and openTooltip() to create and show a new tooltip at a specified position.

When you call clearTooltips(), it hides all tooltips by setting their display property to none. When you call openTooltip(), it creates a new tooltip element, positions it at the specified coordinates, and adds it to the container. Finally, it shows the tooltip by setting its display property to block.

Note that this is just a basic example, and you may need to customize the code to fit your specific use case.