点击同ID Div触发对应Tooltip显示的技术实现方案问询

Hey Brad, let's tackle this problem step by step. First off, there are a couple of issues with your current approach that we need to fix first, then we'll build a solid solution for triggering tooltips via external clicks.

Key Issues in Your Current Code #

• Duplicate IDs: HTML requires all id attributes to be unique on a page. You have both a <button> and a <div> using id="tooltip1" and id="tooltip2" — this is invalid and will cause unexpected behavior with selectors.
• Incorrect Selector: Your jQuery line $("button #tooltip1").click(); is looking for an element with id="tooltip1" inside a <button>, which doesn't match your structure. The button itself is the element with that ID (though again, duplicate IDs are a problem).
• Tooltip Triggered Only on Hover: Your CSS only shows the tooltip on :hover — we need a way to toggle it via click events too.

Fixed Implementation #

Let's rebuild this properly, using unique IDs and a class-based approach to toggle tooltips.

Step 1: Update HTML (Fix Duplicate IDs)

We'll use unique IDs for the tooltip buttons, and add a data-target-tooltip attribute to the trigger divs to link them to the correct button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo">
  <p><button id="tooltip-btn-1" data-tooltip="I’m the tooltip text for button 1.">I’m a button with tooltip 1</button></p>
  <p><button id="tooltip-btn-2" data-tooltip="I’m the tooltip text for button 2.">I’m a button with tooltip 2</button></p>
</div>
<div class="tooltip-trigger" data-target-tooltip="tooltip-btn-1">Show tooltip 1</div>
<div class="tooltip-trigger" data-target-tooltip="tooltip-btn-2">Show tooltip 2</div>

Step 2: Adjust CSS (Add Toggle Class)

We'll keep the base tooltip styles, but add an .active class that forces the tooltip to show, just like hover. We'll also polish the tooltip styling for better usability.

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide tooltip by default */
[data-tooltip]:before, [data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Tooltip text style */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  padding: 8px 12px;
  width: max-content;
  max-width: 200px;
  background: #333;
  color: white;
  border-radius: 4px;
  content: attr(data-tooltip);
  font-size: 14px;
}

/* Tooltip arrow */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  content: "";
}

/* Show tooltip on hover OR when .active class is present */
[data-tooltip]:hover:before, 
[data-tooltip]:hover:after,
[data-tooltip].active:before, 
[data-tooltip].active:after {
  visibility: visible;
  opacity: 1;
}

/* Style trigger divs to look clickable */
.tooltip-trigger {
  margin: 10px 0;
  padding: 8px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

Step 3: Add jQuery Logic (Handle Clicks)

We'll listen for clicks on the trigger divs, toggle the .active class on the linked tooltip button, and add logic to close tooltips when clicking outside.

$(document).ready(function() {
  // Handle click on tooltip triggers
  $('.tooltip-trigger').on('click', function(e) {
    e.stopPropagation(); // Prevent click from bubbling up to document
    const targetTooltipId = $(this).data('target-tooltip');
    const $targetTooltip = $('#' + targetTooltipId);
    
    // Toggle active class on target tooltip
    $targetTooltip.toggleClass('active');
    
    // Close other open tooltips
    $('[data-tooltip].active').not($targetTooltip).removeClass('active');
  });
  
  // Close tooltip when clicking outside
  $(document).on('click', function() {
    $('[data-tooltip].active').removeClass('active');
  });
  
  // Keep tooltip open when clicking on the tooltip itself
  $('[data-tooltip]').on('click', function(e) {
    e.stopPropagation();
  });
});

How This Works #

• Unique IDs: No more duplicate IDs, so selectors work reliably every time.
• Linked Triggers: The data-target-tooltip attribute creates a clear, maintainable link between trigger divs and their corresponding tooltips.
• Flexible Triggering: Tooltips show on hover and can be toggled via click on the external divs.
• User-Friendly Behavior: Clicking outside the tooltip closes it, and clicking the tooltip itself doesn't accidentally dismiss it.

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