Angular自定义带占位符、输入触发弹窗图标响应式文本框需求

Got it, let's tackle this custom input component since Bootstrap and PrimeNG don't have an out-of-the-box solution that checks all your boxes. I'll walk you through a responsive implementation that includes placeholders, a help icon with tooltip on input focus, and works seamlessly across screen sizes.

1. HTML Structure (Bootstrap-Friendly) #

We’ll leverage Bootstrap’s built-in form-control class for responsive sizing, plus add a help icon and custom tooltip container to match your requirements.

<div class="container mt-4">
  <div class="row">
    <div class="col-md-6 col-sm-12"> <!-- Responsive column sizing for all screen sizes -->
      <div class="input-group position-relative">
        <input 
          type="text" 
          class="form-control" 
          placeholder="Enter your text here..."
          id="customInput"
        >
        <span class="input-group-text help-icon" id="helpIcon">
          <i class="bi bi-question-circle"></i> <!-- Bootstrap native icon, no external links -->
        </span>
        <!-- Custom tooltip container -->
        <div class="custom-tooltip position-absolute" id="inputTooltip">
          This is your custom help message! It pops up when you focus the input or hover the icon.
        </div>
      </div>
    </div>
  </div>
</div>

2. CSS for Styling & Responsiveness #

This CSS handles tooltip positioning, responsive adjustments, and visibility toggles, while aligning with Bootstrap’s breakpoint system for small screens.

/* Base tooltip styles */
.custom-tooltip {
  display: none;
  top: 100%;
  left: 0;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 0.9rem;
  width: 100%;
  z-index: 1000;
}

/* Responsive tweaks for mobile */
@media (max-width: 576px) {
  .custom-tooltip {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
  .help-icon {
    font-size: 1rem;
  }
}

/* Show tooltip on input focus, icon hover, or tooltip hover */
#customInput:focus + .help-icon + .custom-tooltip,
.help-icon:hover + .custom-tooltip,
.custom-tooltip:hover {
  display: block;
}

/* Optional: Style the help icon for better UX */
.help-icon {
  cursor: help;
  background-color: #f8f9fa;
  border-left: none;
}

3. JavaScript for Enhanced Interaction (Optional) #

If you want the tooltip to stay visible while typing (not just on initial focus), add this lightweight snippet to handle focus/blur events gracefully:

const input = document.getElementById('customInput');
const tooltip = document.getElementById('inputTooltip');
const helpIcon = document.getElementById('helpIcon');

input.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

input.addEventListener('blur', () => {
  // Add a small delay to let users move to the tooltip/icon
  setTimeout(() => {
    if (!tooltip.matches(':hover') && !helpIcon.matches(':hover')) {
      tooltip.style.display = 'none';
    }
  }, 200);
});

4. Integrating with PrimeNG (Angular) #

If you’re working in an Angular project with PrimeNG, wrap this into a reusable component:

• Use PrimeNG’s InputText as the base input instead of Bootstrap’s form-control
• Replace vanilla JS with Angular’s @HostListener for focus/blur events
• Use Angular’s *ngIf to toggle tooltip visibility instead of CSS display properties

This implementation is fully responsive, includes the placeholder you need, and the help icon triggers a tooltip exactly when users interact with the input. You can tweak colors, positioning, and tooltip content to match your exact design system.

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