如何根据类修改Tooltip颜色？Info Tooltip弹窗样式未生效排查

Ah, I see the issue here! The problem with your CSS not applying to the tooltip popup boils down to how Bootstrap renders tooltips under the hood.

Bootstrap doesn't place the tooltip element right next to your .info-tooltip trigger—instead, it appends it to the end of the <body> tag by default. That means your adjacent sibling selector .info-tooltip + .tooltip can't find the tooltip element at all, so those styles never get applied.

Here are two solid solutions to fix this without overriding default tooltip styles:

Solution 1: Use the container option to keep tooltip and trigger in the same parent #

By forcing Bootstrap to render the tooltip inside the same parent container as your trigger element, the adjacent sibling selector will work as expected. Update your JavaScript initialization code like this:

$('[data-toggle="tooltip"]').tooltip({
  container: function() {
    // Return the parent of the trigger element so tooltip becomes its sibling
    return $(this).parent()[0];
  }
});

This makes the tooltip a direct sibling of your .info-tooltip span, so your original CSS rules will now target it correctly. Just make sure the parent container doesn't have overflow: hidden or similar styles that might clip the tooltip.

Solution 2: Customize the tooltip template to add a unique class #

A more robust approach (that doesn't depend on element positioning) is to add a custom class directly to the tooltip element via Bootstrap's template system. Here's how:

First, update your HTML to include a custom data-template for the info tooltip:

<span style="font-size: 1.5em" class="text-info glyphicon glyphicon-question-sign info-tooltip" 
      data-toggle="tooltip" data-placement="right" data-html="true" 
      title="example text"
      data-template='<div class="tooltip info-tooltip-popup" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'></span>

Then adjust your CSS to target this new class directly (no more sibling selector needed):

.text-info { color: #17a2b8 !important; }
.info-tooltip-popup .tooltip-inner { 
  background-color: #a6ecf7 !important; 
}
/* Note: Adjust the arrow color based on placement—for right placement, use border-right-color instead */
.info-tooltip-popup .arrow:before { 
  border-right-color: #a6ecf7 !important; 
}

If you have multiple info tooltips, you can also set the template globally for all .info-tooltip elements in your JavaScript:

$('.info-tooltip').tooltip({
  template: '<div class="tooltip info-tooltip-popup" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
// Keep default template for other tooltips
$('[data-toggle="tooltip"]:not(.info-tooltip)').tooltip();

This method is cleaner because it doesn't rely on the DOM structure, and it's easier to maintain if you add more tooltip types later.

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