35

我想设计（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"  <!-- 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"
/>

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

4

8 回答 8

72

（2021 年 3 月 23 日更新，包括 Boostap 5）

在 Bootstrap 4 之前：

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

引导程序 4：

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

Bootstrap 5： 他们增加了在源代码中添加自定义类的功能，因此更容易做到。

$().tooltip({
  customClass: 'CUSTOM-CLASS'
})

纯Javascript：

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {customClass: 'CUSTOM-CLASS'})

或在 html 中：

<a href="http://stackoverflow.com" data-bs-custom-class="CUSTOM-CLASS" title="Some Helpful Info!" role="tooltip">Stackoverflow.com</a>
于 2012-11-03T03:00:40.923 回答
25

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

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

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

于 2015-04-26T14:41:00.900 回答
14

（更新：2021 年 2 月 21 日）

引导程序 5

可以通过添加customClass选项（在 JS 中）或data-bs-custom-class="..."在 HTML 中添加选项来使用自定义类，如官方文档中所述：

https://getbootstrap.com/docs/5.0/components/tooltips/#options

引导程序 4 / 引导程序 3

我为 Bootstrap Tooltip 插件创建了一个小扩展，它允许我们通过使用customClassJavascript 中的参数或通过data-custom-classHTML 中的属性来为工具提示添加自定义类。

用法

  • 通过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）而异。

引导程序 v4

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/

2020 年 1 月 8 日更新：与最新的 Bootstrap 版本（4.4.1）兼容： https ://jsfiddle.net/ep0mk94t/

引导程序 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/

引导 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 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/

于 2017-04-14T08:35:26.887 回答
1

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

将自定义类添加到“生成的”工具提示节点：

$(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

于 2017-09-21T11:38:06.347 回答
1

如果选择器返回许多工具提示，则可以 替代此答案：

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

（引导程序 2 和 3 应该没问题）。

于 2018-06-15T19:32:30.763 回答
1

在工具提示元素中添加自定义类/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;
}
于 2020-03-13T05:16:01.153 回答
0

尝试将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>'
  });
});

老实说，我不确定这是否会奏效，但我相信值得一试。

编辑：阅读这篇文章后，它可能会更有帮助。

于 2012-10-31T15:08:42.543 回答
0

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

于 2012-10-31T21:02:27.140 回答