通过单击上一个或下一个打开工具提示，无需专门单击目标

Question

简单地说，我有这个导航：

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>

每个国家/地区项目都有一个与 svg 国家/地区 ID 相同的数据

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

然后我有了这个功能和一个基本的左右导航，最后使用它来启动工具提示，但我不知道如何让它在单击下一个时自动关闭和打开？现在还是需要点击才能打开

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

});

如何通过单击 next/prev 来 close/open 工具提示而不需要专门单击它？ 那么我也许还可以打开第一个，如果导航也有一个活动 class。

点击任意位置即可关闭。

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

Answer 1

您只需将选择器和 'open' 参数传递给 tooltipster 实例：

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

Answer 2

想通了

Codepen：https://codepen.io/rKaiser/pen/ZgXvzw 由于某种原因不得不在 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();
    }
  });
});

通过单击上一个或下一个打开工具提示，无需专门单击目标

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

html

javascript

jquery

tooltip

tooltipster