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

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

Answer 2

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:

<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

Answer 3

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 data attribute.

$('#[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.

Answer 4

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

<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'.

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

Answer 5

Alternative to this answer that 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).

Answer 6

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.

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