Search code examples
jquerycsstooltipster

Tooltipster arrow on and content to be on left

I'm using this jQuery plugin called Tooltipster (https://iamceege.github.io/tooltipster/#options). Is it possible to open the content and arrow on the left side? I've been reading their documentation and it seems that I can't get it working. Any help is much appreciated! Here's my code:

HTML

<span class="tooltip" title="Test Content Here">
     <i class="fa fa-plus-circle" aria-hidden="true"></i>
</span>

JS

$('.tooltip').tooltipster({
     theme: 'tooltipster-shadow',
     trigger: 'click',
     position: 'bottom'
});

I'm getting this output:

enter image description here

But I would really like to get this output:

enter image description here

Thank you so much!

Solution

  • I've managed to solve this issue by using 'bottom-left' on 'position' property name.

    $('.tooltip').tooltipster({
     theme: 'tooltipster-shadow',
     trigger: 'click',
     position: 'bottom-left'
});

    Thank you!