Javascript 单击“上一步”或“下一步”打开tooltipster，无需单击目标

简单地说，我有以下导航：

最后是jsfiddle

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

如何通过单击“下一步/上一步”关闭/打开工具提示，而无需专门单击它？如果导航也有活动类，我可能还可以打开第一个工具提示

点击任何地方都可以关闭它

---

jsiddle:

您只需将选择器和

'open'

参数传递给

工具提示器

实例：

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

算出

Codepen:出于某种原因，不得不在js中添加tooltipsterbundle，添加库不起作用

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

这是正确的

$(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();
    }
  });
});

---

你的意思是曾经用选项调用过tooltipster，最后我用相同的选择器再次调用它，比如$（'.svg container.active'）。tooltipster（'open'）？我得到一个错误，说未知方法？

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

$(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();
    }
  });
});