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 element that triggers the tooltip.

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?

Yohn · Accepted Answer · 2021-03-23T19:42:40.650

79

(Updated March 23rd 2021 to include Boostap 5)

Prior to Bootstrap 4:

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

Bootstrap 4:

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

Bootstrap 5: They've added the ability to add the custom class within the source so its much easier to do.

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

Pure Javascript:

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

or in the html:

<a href="http://stackoverflow.com" data-bs-custom-class="CUSTOM-CLASS" title="Some Helpful Info!" role="tooltip">Stackoverflow.com</a>

edited Mar 23 '21 at 19:42

answered Nov 03 '12 at 03:00

Yohn

2,519
19
23

8

Weird that `template` isn't documented at all in the Bootstrap documentation. – James McMahon Apr 21 '13 at 01:32
6

You can give it as `data-template=""` attribute in the tag you attach tooltip to. It can give you trouble if you want to use that attribute for some other purposes. – Kamil Szot Feb 10 '14 at 12:02
class="arrow" to keep arrow in place in Bootstrap 4 – Fanky Jan 22 '19 at 18:13
`template: '
'` Bootstrap 4
– tomyates Oct 19 '19 at 19:09
Template is specified in the original docs, but it is fairly easy to miss. See under options: https://getbootstrap.com/docs/4.0/components/tooltips/#options – Anas May 19 '20 at 15:45

score 25 · Answer 2 · answered Apr 26 '15 at 14:41

25

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.

answered Apr 26 '15 at 14:41

cneuro

968
13
17

4

Bets solution should be the approved one. Thanks – Yoann Nov 26 '15 at 11:04
1

It doesn't work in case the selector returns many tooltips (only works the 1st). See [this answer](https://stackoverflow.com/a/50881679/1159167) – Ricardo Jun 15 '18 at 19:33
Only thing that worked for me. Thank you! – Daniel Vilela Dec 03 '21 at 21:04

andreivictor · Answer 3 · 2021-02-21T08:10:50.837

(update: 21 Feb 2021)

Bootstrap 5

Custom classes can be used by adding the customClass option (in JS), or data-bs-custom-class="...", in HTML, as described in the official documentation:

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

Bootstrap 4 / Bootstrap 3

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/

This is excellent! Had to tweak to invoke the parent method after adding the class as in my case I was overriding the maximum width which messed with the placement. Other than that perfect! — Matt Skeldon, Sep 28 '17 at 12:28

score 2 · Answer 4 · answered Jun 15 '18 at 19:32

2

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

answered Jun 15 '18 at 19:32

Ricardo

3,696
5
36
50

score 1 · Answer 5 · answered Sep 21 '17 at 11:38

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

score 1 · Answer 6 · answered Mar 13 '20 at 05:16

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

score 0 · Answer 7 · edited May 23 '17 at 12:02

0

Try setting the html option to true and inserting something like <span class="test">YOUR TEXT</span> into the title option.

$(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 post it may be more helpful.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 31 '12 at 15:08

Chase

29,019
1
49
48

Thank you! I got a span with a class, like you suggested YOUR TEXT, but I want to add a class to the parent div. The .tooltip div... I'm going to look trough the post you linked. I found some things there that seems promising :) – Pål Oct 31 '12 at 15:50
I'm glad it helped. I didn't have time to test it my self (currently at work), but let me know if you find a working solution =) – Chase Oct 31 '12 at 16:48

score 0 · Answer 8 · edited Apr 21 '13 at 04:45

0

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.

edited Apr 21 '13 at 04:45

Cody Guldner

2,888
1
25
36

answered Oct 31 '12 at 21:02

Beckyjoon

251
1
3
12

Adding custom class to tooltip

8 Answers8

Bootstrap 5

Bootstrap 4 / Bootstrap 3

Usage

Setup:

Bootstrap v4

Bootstrap v3.3.7

Bootstrap v4.0.0-alpha.6

Linked