关于鼠标悬停触发的小型提示弹窗名称及JavaScript实现方法的技术问询

Hey there! Those small, context-aware pop-up windows that appear when you hover over an element (like Google's search mic icon) are universally known as tooltips. Their main job is to display quick, supplementary information without cluttering up the main UI — they only show up when a user interacts with the target element.

1. Key Details About Tooltips #

• They’re typically triggered by mouse hover (or keyboard focus for accessibility).
• They often contain short descriptions, labels, or hints related to the element they’re attached to.
• They disappear once the user moves the mouse away (or blurs the element).

2. How to Create a Custom Tooltip with JavaScript #

You don’t need fancy libraries to build a basic tooltip — vanilla JS + CSS works perfectly. Here’s a step-by-step implementation:

Step 1: Set Up the HTML #

First, create your trigger element (the thing users will hover over) and a hidden tooltip container:

<!-- Trigger element with tooltip text stored in a data attribute -->
<button class="tooltip-trigger" data-tooltip="Click me to search with your voice!">
  🎤 Voice Search
</button>

<!-- Hidden tooltip container -->
<div class="tooltip" id="custom-tooltip"></div>

Step 2: Style the Tooltip with CSS #

Make the tooltip look polished and position it correctly:

.tooltip {
  position: absolute;
  background-color: #2d2d2d;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: none; /* Hide by default */
  z-index: 1000; /* Ensure it sits above other elements */
  white-space: nowrap; /* Prevent text wrapping */
}

.tooltip-trigger {
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

Step 3: Add JavaScript Interactivity #

Use event listeners to show/hide the tooltip and position it relative to the trigger:

const trigger = document.querySelector('.tooltip-trigger');
const tooltip = document.getElementById('custom-tooltip');

// Show tooltip on hover
trigger.addEventListener('mouseover', (e) => {
  // Pull the tooltip text from the data attribute
  const tooltipText = e.target.getAttribute('data-tooltip');
  tooltip.textContent = tooltipText;
  
  // Display the tooltip
  tooltip.style.display = 'block';
  
  // Calculate position to place it above the trigger
  const triggerRect = trigger.getBoundingClientRect();
  const tooltipWidth = tooltip.offsetWidth;
  
  // Center the tooltip horizontally over the trigger
  tooltip.style.left = `${triggerRect.left + (triggerRect.width / 2) - (tooltipWidth / 2)}px`;
  // Position it 10px above the trigger
  tooltip.style.top = `${triggerRect.top - tooltip.offsetHeight - 10}px`;
});

// Hide tooltip when mouse leaves
trigger.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

// Optional: Keep tooltip aligned if the window is resized
window.addEventListener('resize', () => {
  if (tooltip.style.display === 'block') {
    const triggerRect = trigger.getBoundingClientRect();
    const tooltipWidth = tooltip.offsetWidth;
    tooltip.style.left = `${triggerRect.left + (triggerRect.width / 2) - (tooltipWidth / 2)}px`;
    tooltip.style.top = `${triggerRect.top - tooltip.offsetHeight - 10}px`;
  }
});

Bonus: Handle Multiple Tooltips #

If you have multiple elements needing tooltips, modify the JS to work with all .tooltip-trigger elements:

const triggers = document.querySelectorAll('.tooltip-trigger');
const tooltip = document.getElementById('custom-tooltip');

triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    const tooltipText = e.target.getAttribute('data-tooltip');
    tooltip.textContent = tooltipText;
    tooltip.style.display = 'block';
    
    const triggerRect = trigger.getBoundingClientRect();
    const tooltipWidth = tooltip.offsetWidth;
    tooltip.style.left = `${triggerRect.left + (triggerRect.width / 2) - (tooltipWidth / 2)}px`;
    tooltip.style.top = `${triggerRect.top - tooltip.offsetHeight - 10}px`;
  });
  
  trigger.addEventListener('mouseout', () => {
    tooltip.style.display = 'none';
  });
});

That’s it! This implementation gives you a flexible, customizable tooltip that behaves just like the ones you see on major sites like Google.

内容的提问来源于stack exchange，提问作者Hadi Taj