鼠标悬停警告图标悬浮框文本滚动功能实现求助

Hey there! Let's tackle that scrollable hover tooltip you're trying to build. I've run into similar issues before, so here's a straightforward solution that fixes both the scrolling functionality and keeps the tooltip visible while you interact with its content.

1. Add Scrolling to the Tooltip #

First, we'll use CSS to set a fixed maximum height for the tooltip container and enable vertical scrolling when content overflows. Here's the CSS you need:

.tooltip {
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 12px;
  /* Limit height to trigger scroll */
  max-height: 200px;
  /* Enable vertical scrolling */
  overflow-y: auto;
  /* Add shadow for better visibility */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* Ensure tooltip stays above other content */
  z-index: 1000;
  /* Hide by default */
  display: none;
}

Adjust the max-height value to fit how much content you want visible before scrolling kicks in.

2. Keep the Tooltip Visible When Hovering Over It #

The main issue with hover tooltips is they disappear when you move your mouse off the trigger icon. To fix this, we'll use JavaScript to track hover states on both the icon and the tooltip, only hiding it when the mouse leaves both elements.

Here's the JavaScript logic:

const warningIcon = document.querySelector('.warning-icon');
const tooltip = document.querySelector('.tooltip');

// Show tooltip when hovering the warning icon
warningIcon.addEventListener('mouseenter', () => {
  tooltip.style.display = 'block';
  // Position tooltip relative to the icon (adjust as needed)
  const iconBounds = warningIcon.getBoundingClientRect();
  tooltip.style.top = `${iconBounds.bottom + 8}px`;
  tooltip.style.left = `${iconBounds.left}px`;
});

// Function to hide tooltip after a small delay
function hideTooltip() {
  setTimeout(() => {
    // Only hide if mouse isn't over the icon OR tooltip
    if (!warningIcon.matches(':hover') && !tooltip.matches(':hover')) {
      tooltip.style.display = 'none';
    }
  }, 100); // Short delay to let mouse move between icon and tooltip
}

// Attach hide event to both icon and tooltip
warningIcon.addEventListener('mouseleave', hideTooltip);
tooltip.addEventListener('mouseleave', hideTooltip);

The 100ms delay gives you enough time to move your mouse from the icon to the tooltip without it closing unexpectedly.

3. Complete HTML Example #

Here's a full working example to tie everything together:

<!-- Warning Icon Trigger -->
<span class="warning-icon" style="font-size: 20px; cursor: pointer;">⚠️</span>

<!-- Scrollable Tooltip -->
<div class="tooltip">
  <p>Your long text content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.</p>
  <p>Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.</p>
</div>

Quick Tips #

• If your tooltip is positioned incorrectly, tweak the top and left values in the JavaScript to align it perfectly with your icon.
• For better accessibility, consider adding aria-describedby attributes to link the icon to the tooltip content.
• You can customize the tooltip's styling (colors, padding, border radius) to match your app's design system.

This should resolve both the scrolling issue and the problem of the tooltip disappearing when you try to interact with its content. Let me know if you need to adjust anything for your specific setup!

内容的提问来源于stack exchange，提问作者Prabhat Mishra