根据类别更改工具提示颜色

Question

我有一个使用工具提示的页面。以前，只有“警告”工具提示主要为红色，带有较浅的红色警告消息，但现在我希望以不太威胁的阴影显示一些“信息”工具提示。我创建了一个名为info-tooltip的CSS类

.text-info {
    color: #17a2b8 !important; /* This is the color of the tooltip itself */
}

.info-tooltip + .tooltip > .tooltip-inner {
    background-color: #a6ecf7 !important; /* This is the desired color for the tooltip message box */
}

.info-tooltip + .tooltip .arrow:before {
    border-top-color: #a6ecf7 !important; /* This is the desired color for the tooltip message box */
}

在我的标记中，我有以下内容：

<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"></span>

在我的JavaScript中，我有：

$('[data-toggle="tooltip"]').tooltip(); 

但是，虽然工具提示本身具有正确的颜色，但是当您将鼠标悬停在其上时，消息“示例文本”将以默认颜色显示，而不是我选择的颜色。我不想覆盖默认颜色，因为它是警告消息和其他页面上的消息的正确颜色。