0

I need to customize the generated tooltip HTML depending on what element triggers it, but I have no way of telling which one did once the tooltip is shown.

I can't use data-container with an id either because there are multiple of these trigger elements.

jsfiddle here

dabadaba
  • 9,064
  • 21
  • 85
  • 155
  • Can you please give us something to work on? like a fiddle or whatever. Thanks. – briosheje Oct 17 '18 at 13:32
  • @briosheje sure: https://jsfiddle.net/eqsLp8gt/ – dabadaba Oct 17 '18 at 13:57
  • is `data-container` mandatory? – briosheje Oct 17 '18 at 14:49
  • @briosheje these tooltips are displayed within a modal, so I am using `data-container` to make sure they are rendered within that container, otherwise they will show up hidden behind it because of `z-index`. – dabadaba Oct 17 '18 at 14:51
  • it seems the data-container is creating the issue. If you check this: https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color And try this fiddle: http://jsfiddle.net/ckxSs/16/ you may notice that without data-container your code will work. I've updated your fiddle to prove the issue: https://jsfiddle.net/eqsLp8gt/1/ . If you can create a proper CSS selector you can surely make it work with data-container as well, but I'm not really a css master... so.. Maybe this will still help you. – briosheje Oct 17 '18 at 14:54
  • Otherwise, you can use this javascript solution: https://jsfiddle.net/eqsLp8gt/2/ . This will apply the css class of the data-tooltip-class attribute to the inner tooltip item. – briosheje Oct 17 '18 at 14:58

1 Answers1

1

Out of the two solutions, you can probably work on this one, where through the bootstrap 3's inserted.bs.tooltip event you can customize the tooltip.

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    tooltip.$tip.find('.tooltip-inner').addClass($(e.target).data('tooltip-class'));
});

the .find part is relevant, since it targets the proper element.

fiddle: https://jsfiddle.net/eqsLp8gt/2/

EDIT:

Updated fiddle, suggested by the OP in order to work with the arrow styling as well: https://jsfiddle.net/eqsLp8gt/3/

briosheje
  • 7,356
  • 2
  • 32
  • 54
  • 1
    Amazing, that's a pretty smart solution. Just change your jsfiddle to this: https://jsfiddle.net/eqsLp8gt/3/ so the arrow also changes color. – dabadaba Oct 17 '18 at 15:24