Open tooltipster by clicking prev or next, without needing to click on target specifically

Question

Simply put, I have this navigation:

jsfiddle at the end.

<div class="country-list">
  <div class="country-item active" data-country="pt">PT</div>
  <div class="country-item" data-country="be">BE</div>
  <div class="country-item" data-country="pl">PL</div>
  <div class="country-item" data-country="ge">PT</div>
</div>
<ul class="next-prev">
  <li class="prev">Prev</li>
  <li class="next">Next</li>
</ul>

Each country-item has a an equal data to svg country id

<g id="pt" class="enabled"
<g id="be" class="enabled"

Then I have this function and a basic left right nav that uses it in the end to initiate tooltipster, but I dont know how to make it that it would automatically close and open when next is clicked? right now I still need to click to open it.

function showMapInfo() {
    var dataCountry = $('.country-item.active').data('country');
    //console.log(dataCountry);
    var countryId;
   $('.svg-container .enabled').each( function(){
      countryId = $(this).attr("id");
      //console.log(countryId);
    if (dataCountry === countryId) {
    $('.svg-container .enabled').removeClass('active');
    $(this).addClass('active');

     $('.svg-container .active').tooltipster({
       interactive: true,
       maxWidth: 300,
       distance: 60,
       animation: 'grow',
       side: 'bottom',
       trigger: 'click',
       contentAsHTML: true,
       content:$('#' + dataCountry).data("description")
    });
   }
   });
}
showMapInfo();

$('.next-prev li').on('click', function () {
  if ($(this).hasClass('next')){
    if ($('.country-item.active').next().length == 0) {
        $('.country-item.active').removeClass('active');
        $('.country-item:first-child').addClass('active');
    } else {
      $('.country-item.active').next().addClass("active").prev().removeClass('active');
      console.log($('.country-item.active').next());
    }
        showMapInfo();

  } else {
     if ($('.country-item.active').prev().length == 0) {
        $('.country-item.active').removeClass('active');
        $('.country-item:last-child').addClass('active');
    } else {
      $('.country-item.active').prev().addClass("active").next().removeClass('active');
      console.log($('.country-item.active').prev());
    }
        showMapInfo();
  }

});

How to close/open tooltip by clicking just next/prev without needing to click on it specifically? Then I could perhaps also have the first one opened if the nav has an active class also.

Clicking anywhere could just close it.

Jsfiddle: https://jsfiddle.net/rKaiser/kp16ohm8/46/

Answer 1

Figured it out

Codepen: https://codepen.io/rKaiser/pen/ZgXvzw had to add tooltipsterbundle in the js for some reason, adding the library didnt work.

$('...selector').tooltipster('show')  

is correct.

$(document).ready(function() {
  // START MAP FUNCTIONS
  var countryId;
  $('.svg-container .enabled').each(function () {
    countryId = $(this).attr("id");
  });

  function initTooltipster() {
    $('.svg-container .enabled').each(function () {
     $(this).tooltipster({
      interactive: true,
      minIntersection: 64,
      repositionOnScroll: false,
      animation: 'fade',
      trigger: 'custom',//disable hover
      distance: 30,
      theme: 'tooltipster-shadow',
      trackOrigin: true, // on resize;
      //trackTooltip: true,

      side: 'bottom',
      viewportAware: false,
      //trigger: 'click',
      contentAsHTML: true,
      content: $(this).data("description")
    });
   });
  }
  initTooltipster();

  function showMapInfo() {
    var dataCountry = $('.country-item.active').data('country');

    $('.svg-container .tooltipstered').each(function () {
      var countryIdd = $(this).attr("id");
            console.log(countryIdd);
      if (dataCountry === countryIdd) {
        //console.log(true);
        $('.svg-container .tooltipstered').removeClass('active');
        //console.log($(this));
        $(this).addClass('active');

        $('.tooltipstered').tooltipster('close');

        $('.tooltipstered.active').tooltipster('show');

      }
    }); // each
  }
    showMapInfo();

  $('.next-prev li').on('click', function () {
    if ($(this).hasClass('next')) {
      if ($('.country-item.active').next().length === 0) {
        $('.country-item.active').removeClass('active');
        $('.country-item:first-child').addClass('active');
      } else {
        $('.country-item.active').next().addClass("active").prev().removeClass('active');
        //console.log($('.country-item.active').next());
      }
      showMapInfo();

    } else {
      if ($('.country-item.active').prev().length === 0) {
        $('.country-item.active').removeClass('active');
        $('.country-item:last-child').addClass('active');
      } else {
        $('.country-item.active').prev().addClass("active").next().removeClass('active');
        //console.log($('.country-item.active').prev());
      }
      showMapInfo();
    }
  });
});

Answer 2

You just pass the selector and the 'open' argument to the tooltipster instance:

$('...selector').tooltipster('open')