Adding custom class to tooltip

Question

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 ele

Answer 1

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

Usage:

• via data-custom-class attribute:

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

Tooltip example

• via customClass parameter:

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

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/

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

---

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

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

}

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

---

Github repo:

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