将自定义类添加到工具提示
我想样式（css）一些bootstrap-tooltip.js工具提示，而不影响所有的工具提示。 我尝试了很多不同的解决方案，但我总是最终在触发工具提示的元素中添加一个类。
这是我试过的：
$(function(){ $("[id$=amount]").tooltip({ trigger: 'manual', placement: 'right' }).addClass("test"); // <--- This does not help me. Class just ends up }); // in the trigger element. Se html output // from firebug below... 但是这个类只会在触发工具提示的元素中结束：
<input id="list_wishes_attributes_0_amount" class="test" type="text" tabindex="3" size="30" rel="tooltop" name="list[wishes_attributes][0][amount]" min="0" data-original-title="Only numbers please" />
如何为工具提示分配自定义类，而不是触发它的输入字段？
$().tooltip({ template: '' })
我使用的方法是通过JQuery将一个类直接附加到元素（在Bootstrap 3中工作）。 这有点棘手，因为您需要通过父级的data属性找到隐藏的自动生成元素。
$('#[id$=amount]') .tooltip() .data('bs.tooltip') .tip() .addClass('custom-tooltip-class');
我更喜欢这个来覆盖模板，因为它比所有额外的HTML更简洁，更简洁。
我为Bootstrap Tooltip插件创建了一个小扩展，它允许我们通过在Javascript中使用customClass参数或通过HTML中的data-custom-class属性为工具提示添加自定义类。
用法：
- 通过
data-custom-class属性：
data-custom-class="tooltip-custom" – 使用类tooltip-custom构建工具tooltip-custom 。
- 通过
customClass参数：
customClass: 'tooltip-custom'
$('.my-element').tooltip({ customClass: 'tooltip-custom' });
建立：
代码根据使用的Bootstrap版本（v3，v4-alpha或v4）而有所不同。
Bootstrap v4（与v4.0.0和v4.1.0兼容）
使用Javascript
;(function($) { if (typeof $.fn.tooltip.Constructor === 'undefined') { throw new Error('Bootstrap Tooltip must be included first!'); } var Tooltip = $.fn.tooltip.Constructor; // add customClass option to Bootstrap Tooltip $.extend( Tooltip.Default, { customClass: '' }); var _show = Tooltip.prototype.show; Tooltip.prototype.show = function () { // invoke parent method _show.apply(this,Array.prototype.slice.apply(arguments)); if ( this.config.customClass ) { var tip = this.getTipElement(); $(tip).addClass(this.config.customClass); } }; })(window.jQuery);
CSS
.tooltip-custom .tooltip-inner { background-color: #5b2da3; } .tooltip-custom.bs-tooltip-top .arrow:before { border-top-color: #5b2da3; } .tooltip-custom.bs-tooltip-right .arrow:before { border-right-color: #5b2da3; } .tooltip-custom.bs-tooltip-left .arrow:before { border-left-color: #5b2da3; } .tooltip-custom.bs-tooltip-bottom .arrow:before { border-bottom-color: #5b2da3; }
萨斯
@mixin tooltip-custom($bg-color, $color: $tooltip-color) { .tooltip-inner { background-color: $bg-color; @if $color != $tooltip-color { color: $color; } } &.bs-tooltip-top .arrow:before { border-top-color: $bg-color; } &.bs-tooltip-right .arrow:before { border-right-color: $bg-color; } &.bs-tooltip-left .arrow:before { border-left-color: $bg-color; } &.bs-tooltip-bottom .arrow:before { border-bottom-color: $bg-color; } }
示例 ： https ： //jsfiddle.net/zyfqtL9v/
Bootstrap v3.3.7
使用Javascript
(function ($) { if (typeof $.fn.tooltip.Constructor === 'undefined') { throw new Error('Bootstrap Tooltip must be included first!'); } var Tooltip = $.fn.tooltip.Constructor; $.extend( Tooltip.DEFAULTS, { customClass: '' }); var _show = Tooltip.prototype.show; Tooltip.prototype.show = function () { _show.apply(this,Array.prototype.slice.apply(arguments)); if ( this.options.customClass ) { var $tip = this.tip() $tip.addClass(this.options.customClass); } }; })(window.jQuery);
CSS
.tooltip-custom .tooltip-inner { background-color: #5b2da3; } .tooltip-custom.top .tooltip-arrow { border-top-color: #5b2da3; } .tooltip-custom.right .tooltip-arrow { border-right-color: #5b2da3; } .tooltip-custom.left .tooltip-arrow { border-left-color: #5b2da3; } .tooltip-custom.bottom .tooltip-arrow { border-bottom-color: #5b2da3; }
示例 ： https ： //jsfiddle.net/cunz1hzc/
Bootstrap v4.0.0-alpha.6
使用Javascript
;(function($) { if (typeof $.fn.tooltip.Constructor === 'undefined') { throw new Error('Bootstrap Tooltip must be included first!'); } var Tooltip = $.fn.tooltip.Constructor; // add customClass option to Bootstrap Tooltip $.extend( Tooltip.Default, { customClass: '' }); var _show = Tooltip.prototype.show; Tooltip.prototype.show = function () { // invoke parent method _show.apply(this,Array.prototype.slice.apply(arguments)); if ( this.config.customClass ) { var tip = this.getTipElement(); $(tip).addClass(this.config.customClass); } }; })(window.jQuery);
CSS
.tooltip-custom .tooltip-inner { background-color: #5b2da3; } .tooltip-custom.tooltip-top .tooltip-inner::before, .tooltip-custom.bs-tether-element-attached-bottom .tooltip-inner::before { border-top-color: #5b2da3; } .tooltip-custom.tooltip-right .tooltip-inner::before, .tooltip-custom.bs-tether-element-attached-left .tooltip-inner::before { border-right-color: #5b2da3; } .tooltip-custom.tooltip-bottom .tooltip-inner::before, .tooltip-custom.bs-tether-element-attached-top .tooltip-inner::before { border-bottom-color: #5b2da3; } .tooltip-custom.tooltip-left .tooltip-inner::before, .tooltip-custom.bs-tether-element-attached-right .tooltip-inner::before { border-left-color: #5b2da3; }
SASS mixin：
@mixin tooltip-custom($bg-color, $color: $tooltip-color) { .tooltip-inner { background-color: $bg-color; @if $color != $tooltip-color { color: $color; } } &.tooltip-top, &.bs-tether-element-attached-bottom { .tooltip-inner::before { border-top-color: $bg-color; } } &.tooltip-right, &.bs-tether-element-attached-left { .tooltip-inner::before { border-right-color: $bg-color; } } &.tooltip-bottom, &.bs-tether-element-attached-top { .tooltip-inner::before { border-bottom-color: $bg-color; } } &.tooltip-left, &.bs-tether-element-attached-right { .tooltip-inner::before { border-left-color: $bg-color; } }
}
示例 ： https ： //jsfiddle.net/6dhk3f5L/
Github回购：
https://github.com/andreivictor/bootstrap-tooltip-custom-class
也许这可以帮助像我这样的人帮助我：
将Custom类添加到“生成的”工具提示节点：
$(document).ready(function() { $(".my-class").tooltip({ tooltipClass:"my-custom-tooltip" }); });
样本输出作为body元素的最后一个子元素：
应用于此问题逻辑：
$(function(){ $("[id$=amount]").tooltip({ trigger: 'manual', placement: 'right' tooltipClass:'test' }) });
使用jQuery UI测试 – v1.10.3
尝试将html选项设置为true并在title选项中插入类似YOUR TEXT的内容。
$(function(){ $("[id$=amount]").tooltip({ trigger: 'manual', placement: 'right', html: true, title: 'YOUR TEXT' }); });
老实说，我不确定这是否有效，但我相信这值得一试。
编辑 ：阅读这篇文章后，它可能会更有帮助。
在.addClass之前，尝试添加.parent()直到获得父div 。 另外 – 你总是可以使用jQuery选择器来找到你想要的div并从那里更新CSS。
此选项的替代方法适用于选择器返回许多工具提示的情况：
$("[id$=amount]") .tooltip() .each((i, el)=> $(el).data('bs.tooltip').tip().addClass('test'));
（ 它应该适用于bootstrap 2和3 ）。