Angular 4中如何根据条件控制Tooltip的显示？

Hey there! Let's figure out how to make a tooltip only show up when a disabled button/input (or any HTML element that meets your specific conditions) is hovered. I've got a couple of solid solutions for you, depending on whether you're using vanilla code or a framework like Bootstrap.

原生JavaScript + CSS 方案（无依赖） #

This is perfect if you want a lightweight setup without any external libraries.

Step 1: HTML Structure #

Add a data-tooltip attribute to your target elements to store the tooltip text, plus a hidden container for the tooltip itself:

<button disabled class="tooltip-trigger" data-tooltip="This button is disabled—please finish the form first">Disabled Button</button>
<input disabled type="text" class="tooltip-trigger" data-tooltip="This input is locked and can't be edited">
<div class="tooltip-content" id="tooltip"></div>

Step 2: CSS Styling #

Style the tooltip to be hidden by default, with clean, accessible styling:

.tooltip-content {
  position: absolute;
  background-color: #2d3748;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  display: none;
  z-index: 1000;
  white-space: nowrap;
}

/* Add a small arrow pointing to the target element */
.tooltip-content::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #2d3748 transparent;
}

Step 3: JavaScript Logic #

Listen for mouse events, check if the element meets your conditions (like being disabled or having a custom data attribute), then show/hide the tooltip accordingly:

const tooltipElement = document.getElementById('tooltip');
const triggerElements = document.querySelectorAll('.tooltip-trigger');

triggerElements.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    // Customize this condition to fit your needs!
    const shouldShow = e.target.disabled || e.target.dataset.condition === 'active';
    
    if (shouldShow) {
      // Set tooltip text
      tooltipElement.textContent = e.target.dataset.tooltip;
      
      // Position tooltip above the target element
      const elementRect = e.target.getBoundingClientRect();
      tooltipElement.style.left = `${elementRect.left + (elementRect.width / 2) - (tooltipElement.offsetWidth / 2)}px`;
      tooltipElement.style.top = `${elementRect.top - tooltipElement.offsetHeight - 10}px`;
      
      tooltipElement.style.display = 'block';
    }
  });
  
  trigger.addEventListener('mouseout', () => {
    tooltipElement.style.display = 'none';
  });
});

Bootstrap Tooltip 方案（框架用户） #

If you're already using Bootstrap, you can tweak its built-in tooltip component to work with conditional triggers:

Step 1: Initialize Tooltip with Custom Logic #

$(function () {
  // Initialize tooltips with manual trigger control
  $('[data-bs-toggle="tooltip"]').tooltip({
    trigger: 'manual',
    // Override show behavior to check conditions first
    show: function() {
      const target = this.$element[0];
      // Skip showing if the element doesn't meet our criteria
      if (!target.disabled && target.dataset.condition !== 'active') {
        return false;
      }
    }
  });
  
  // Listen for hover events to trigger tooltip conditionally
  $('[data-bs-toggle="tooltip"]').on('mouseover', function() {
    const target = this;
    if (target.disabled || target.dataset.condition === 'active') {
      $(this).tooltip('show');
    }
  });
  
  // Hide tooltip when mouse leaves
  $('[data-bs-toggle="tooltip"]').on('mouseout', function() {
    $(this).tooltip('hide');
  });
});

Step 2: Corresponding HTML #

<button disabled data-bs-toggle="tooltip" data-bs-title="This button is disabled—please finish the form first">Disabled Button</button>
<input disabled type="text" data-bs-toggle="tooltip" data-bs-title="This input is locked and can't be edited">

Quick Pro Tips #

• Disabled Element Caveat: Some browsers don't fire mouse events on disabled elements. If you run into this, wrap the disabled element in a <span> or <div> and listen to the container's mouse events instead, then check the inner element's state.
• Extend Conditions: You can expand the shouldShow check to include anything—like checking if a form is invalid, an element has a specific class, or even dynamic state from your app.

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