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

Adding custom class to tooltip

提问by P?l

I want to style(css) some bootstrap-tooltip.js tooltips, without affecting all the tooltips. I have tried many different solutions but i allways end up adding a class to the element that triggers the tooltip.

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

This is what i tried:

这是我试过的：

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

But then the class just ends up in the element that triggers the tooltips:

但是，该类最终会出现在触发工具提示的元素中：

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

How can i assign a custom class for my tooltip, and not the input field that triggers it?

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

回答by Yohn

Prior to Bootstrap 4:

在 Bootstrap 4 之前：

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

Bootstrap 4:

引导程序 4：

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

回答by cneuro

The method I use is to attach a class directly to the element via JQuery (works in Bootstrap 3). It's a little trickier, because you need to find the hidden, auto-generated element via the parent's dataattribute.

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

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

I prefer this to overriding the template, because it's much more concise and less verbose than all that extra HTML.

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

回答by andreivictor

I've created a small extension for Bootstrap Tooltip plugin, which allows us to add custom classes for tooltips by using customClassparameter in Javascript or via data-custom-classattribute in HTML.

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

Usage:

用法：

• via data-custom-classattribute:

• 通过data-custom-class属性：

data-custom-class="tooltip-custom"- builds a tooltip with the class tooltip-custom.

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>

• via customClassparameter:

• 通过customClass参数：

customClass: 'tooltip-custom'

customClass: 'tooltip-custom'

$('.my-element').tooltip({
    customClass: 'tooltip-custom'
});

Setup:

设置：

The code differs depending on the Bootstrap version used (v3, v4-alpha or v4).

代码因使用的 Bootstrap 版本（v3、v4-alpha 或 v4）而异。

Bootstrap v4

引导程序 v4

Javascript

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

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;
}

Sass

萨斯

@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;
  }

}

Example: https://jsfiddle.net/zyfqtL9v/

示例：https: //jsfiddle.net/zyfqtL9v/

UPDATE January 8, 2020: compatible with the latest Bootstrap version (4.4.1):https://jsfiddle.net/ep0mk94t/

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

---

---

Bootstrap v3.3.7

引导程序 v3.3.7

Javascript

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

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;
}

Example: https://jsfiddle.net/cunz1hzc/

示例：https: //jsfiddle.net/cunz1hzc/

---

---

Bootstrap v4.0.0-alpha.6

Bootstrap v4.0.0-alpha.6

Javascript

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

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;
}

SASSmixin:

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;
  }
}

}

}

Example: https://jsfiddle.net/6dhk3f5L/

示例：https: //jsfiddle.net/6dhk3f5L/

---

---

Github repo:

Github 仓库：

https://github.com/andreivictor/bootstrap-tooltip-custom-class

https://github.com/andreivictor/bootstrap-tooltip-custom-class

回答by Darrelk

Maybe this can help someone like it helped me:

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

Add a Custom class to your "generated" tooltip node:

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

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

Sample output as last child of body element:

作为 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>

Applied to this questions logic:

应用于这个问题逻辑：

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

Tested using jQuery UI - v1.10.3

使用 jQuery UI - v1.10.3 测试

回答by Ricardo

Alternative to this answerthat works in case the selector returns many tooltips:

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

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

(it should be OK for bootstrap 2 and 3).

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

回答by Mohammed Shafeek

Add a custom class/id in tool tip element as like :

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

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

Trigger the script as follows,

触发脚本如下，

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

Add css properties for the class 'yourclassname'.

为类“yourclassname”添加 css 属性。

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

回答by Chase

Try setting the htmloption to trueand inserting something like <span class="test">YOUR TEXT</span>into the titleoption.

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

I honestly am not sure if this will work, but I believe it's worth a shot.

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

EDIT: After reading this postit may be more helpful.

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

回答by Beckyjoon

Before the .addClass, try adding .parent()until you get the parent div. Also - you could always use jQuery selectors to find the divyou want and update the CSS from there.

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