Question

我想在一些bootstrap-tooltip.js工具提示中设置样式（css），而不会影响所有工具提示。我尝试了很多不同的解决方案，但我总是最终在触发工具提示的元素中添加一个类。

这是我试过的：

$(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"  <!-- The class I tried to add to the tooltip ended up here. -->
     type="text" 
     tabindex="3" 
     size="30" 
     rel="tooltop" 
     name="list[wishes_attributes][0][amount]" 
     min="0" 
     data-original-title="Only numbers please"
/>

如何为工具提示指定自定义类，而不是触发它的输入字段？

Answer 1

$().tooltip({
  template: '<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
})

Answer 2

我使用的方法是通过JQuery将一个类直接附加到元素（在Bootstrap 3中工作）。这有点棘手，因为您需要通过父级data属性找到隐藏的自动生成元素。

$('#[id$=amount]')
  .tooltip()
    .data('bs.tooltip')
      .tip()
      .addClass('custom-tooltip-class');

我更喜欢这个覆盖模板，因为它比所有额外的HTML更简洁，更简洁。

Answer 3

我已经为Bootstrap Tooltip插件创建了一个小扩展，它允许我们使用Javascript中的customClass参数或HTML中的data-custom-class属性为工具提示添加自定义类。

用法：

通过data-custom-class属性：

data-custom-class="tooltip-custom" - 使用班级tooltip-custom构建工具提示。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-custom" title="Custom tooltip example">Tooltip example</button>

通过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

Answer 4

也许这可以帮助像我这样的人帮助我：

将自定义类添加到＆＃34;生成＆＃34;工具提示节点：

$(document).ready(function() {
    $(".my-class").tooltip({
        tooltipClass:"my-custom-tooltip"
    });
});

示例输出作为body元素的最后一个子元素：

<div id="ui-tooltip-1" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content my-custom-tooltip" style="top: 295px; left: 908px; display: block;">
    <div class="ui-tooltip-content">My title contnet</div>
</div>

应用于这个问题逻辑：

$(function(){
  $("[id$=amount]").tooltip({
    trigger: 'manual',
    placement: 'right'
    tooltipClass:'test'
  })
});

使用jQuery UI测试 - v1.10.3

Answer 5

替换this answer，以便在选择器返回许多工具提示时起作用：

$("[id$=amount]")
  .tooltip()
  .each((i, el)=> $(el).data('bs.tooltip').tip().addClass('test'));

（它应该适用于bootstrap 2和3 ）。

Answer 6

尝试将html选项设置为true，然后在<span class="test">YOUR TEXT</span>选项中插入title之类的内容。

$(function(){
  $("[id$=amount]").tooltip({
    trigger: 'manual',
    placement: 'right',
    html: true,
    title: '<span class="test">YOUR TEXT</span>'
  });
});

老实说，我不确定这是否有用，但我相信这值得一试。

编辑：阅读this post后，它可能会更有帮助。

Answer 7

在.addClass之前，尝试添加.parent()，直到您获得父div。另外 - 你总是可以使用jQuery选择器来找到你想要的div并从那里更新CSS。

Answer 8

在工具提示元素中添加自定义类/ id，如下所示：

<span class="red-tooltip" data-toggle='tooltip' data-placement='top' data-original-title='Print wisely'>Here tooltip is needed</span>

按以下方式触发脚本，

$('.red-tooltip').on('show.bs.tooltip', function(){
    $($(this).data('bs.tooltip').tip).addClass('yourclassname');
});

为类“ yourclassname”添加css属性。

.redtooltip.tooltip > .tooltip-inner{
    background-color:#FF5257;
    box-shadow: 0px 0px 4px 0px #FF5257 !important;
}

将自定义类添加到工具提示

8 个答案:

用法：

设定：

Bootstrap v4（与v4.0.0和v4.1.0兼容）

Bootstrap v3.3.7

Bootstrap v4.0.0-alpha.6

Github回购：