Is there a way to change the side/position of a single tooltipster tooltip without having multiple classes?

Question

I'm currently labelling anatomy diagrams and in order to minimize the labels overlapping the diagrams too much, I want to set only SOME of the tooltips to show from the bottom of the svg that I'm tagging. In the example I include it would be setting the tooltip for the svg with id "mud_levator_mandibulae_externus" to show at the bottom instead of the top.

I know I can separate each group of tooltips into different classes, but I would like to keep them all under one class if I can since I have JavaScript code that would be tedious to change if I had different classes.

I thought you could add the function specific to the id to the tag after my tooltips initialization but it's not working. Adding it into the document ready function doesn't work either.

$(document).ready(function() {
            $('.tooltip').tooltipster({
             theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
             trigger: 'click',
             });
        });

$('#mud_levator_mandibulae_externus').tooltipster({
 side:'bottom'
});

Answer 1

You could add one more css class to your element, like class="tooltip tooltip-left" and then have your functionInit detect it and change the side option accordingly, something like

functionInit (instance, helper) {
  if ($(instance.origin).hasClass('tooltip-left')) {
    instance.option('side', 'left')
  }
}