Bootstrap 4 Tooltip两大问题：点击后残留、禁用元素异常显示

Hey there! Let's work through these two Bootstrap Tooltip problems you're facing—they're common quirks with straightforward fixes that won't require repeating scripts across pages.

1. Persistent Tooltip After Click (Even After Loading New Content) #

The root issue here is Bootstrap Tooltip's default trigger behavior: it uses hover focus by default. When you click a button, it gains focus, which keeps the Tooltip visible until the element loses focus. Since you're loading content dynamically with .load(), the initialized Tooltip binding (using selector on body) still applies, but the focus-triggered persistence remains.

Here are two solid fixes:

• Option 1: Restrict Tooltip to only hover triggers
  Modify your initialization code to set trigger: 'hover'—this way, clicks won't trigger the tooltip at all, eliminating the persistent display:

  $('body').tooltip({ 
    selector: '[data-toggle="tooltip"]', 
    delay: { show: 550, hide: 0 },
    trigger: 'hover' // Disable focus-triggered tooltips
  });
  

• Option 2: Keep click functionality but auto-hide on click
  If you need to allow click-triggered tooltips, add a global click handler to hide the tooltip when the element is clicked. Since you're using body with a selector, this will work for dynamically loaded elements too:

  $('body').on('click', '[data-toggle="tooltip"]', function() {
    $(this).tooltip('hide');
  });
  

2. Broken Tooltip on Disabled Button (Incorrect Styling & Display) #

Disabled elements can't trigger mouse events, so Bootstrap Tooltip can't attach directly to them. Plus, the default tooltip styling might not apply as expected. Here's how to fix both issues globally:

Step 1: Wrap the disabled button in a container #

Move the Tooltip attributes to a parent container (like a div or span) that can receive mouse events. This lets the tooltip trigger properly even when the button is disabled:

<div class="d-inline-block" data-toggle="tooltip" data-placement="bottom" title="Click to clear the date">
  <button id="clearButton" aria-hidden="true" class="btn roundButton d-flex align-items-center justify-content-center alert-warning" disabled>
    <i class="fas fa-times" style="font-size: medium"></i>
  </button>
</div>

The d-inline-block class ensures the container doesn't break your layout.

Step 2: Force black tooltip styling globally #

Add this custom CSS to your main stylesheet (so it applies across all pages) to override Bootstrap's default tooltip background and arrow color:

/* Global black tooltip styling */
.tooltip.show {
  background-color: #000 !important;
}
/* Adjust arrow color based on placement (this is for bottom placement) */
.tooltip.bottom .arrow::before {
  border-bottom-color: #000 !important;
}
/* Add other placement variants if needed */
.tooltip.top .arrow::before {
  border-top-color: #000 !important;
}

Quick note on your click handler #

I spotted a tiny syntax error in your button click code—you're missing a semicolon after $('#createInvoiceDateField').val(''). Fix that to ensure the rest of the code runs correctly:

$('#clearButton').on('click', function () { 
  $('#createInvoiceDateField').val(''); // Added missing semicolon
  $('#createInvoiceSubmitButton, #clearButton').prop('disabled', true); 
});

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