您可以使用这种方式：
<a href="#" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom" >Tooltip on bottom</a>
在CSS中：
.tooltip-arrow,.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}Moeen MH：使用最新版本的引导程序，您可能需要执行以下操作才能消除黑色箭头：
.red-tooltip + .tooltip.top > .tooltip-arrow {background-color: #f00;}将其用于Bootstrap 4：
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before { border-bottom-color: #f00; }完整摘要：
$(function() { $('[data-toggle="tooltip"]').tooltip()}).tooltip-main { width: 15px; height: 15px; border-radius: 50%; font-weight: 700; background: #f3f3f3; border: 1px solid #737373; color: #737373; margin: 4px 121px 0 5px; float: right; text-align: left !important;}.tooltip-qm { float: left; margin: -2px 0px 3px 4px; font-size: 12px;}.tooltip-inner { max-width: 236px !important; height: 76px; font-size: 12px; padding: 10px 15px 10px 20px; background: #FFFFFF; color: rgb(0, 0, 0, .7); border: 1px solid #737373; text-align: left;}.tooltip.show { opacity: 1;}.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before { border-bottom-color: #f00; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div data-toggle="tooltip" data-placement="top" data-original-title="Hello world"><span >?</span></div><style> .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #f00; }</style>
