通过单击 prev 或 next 打开 tooltipster，无需专门单击目标

Posted 2023-05-07

【中文标题】通过单击 prev 或 next 打开 tooltipster，无需专门单击目标

【英文标题】：Open tooltipster by clicking prev or next, without needing to click on target specifically

【发布时间】：2019-12-13 16:49:18

【问题描述】：

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

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

);

如何通过单击下一个/上一个来关闭/打开工具提示而不需要专门单击它？如果导航也有一个活动类，我也许还可以打开第一个。

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

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

【参考方案1】：

想通了

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

【参考方案2】：

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

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

【讨论】：

你的意思是曾经用选项调用工具提示器，然后我用相同的选择器再次调用它，比如 $('.svg-container .active').tooltipster('open'); ?我收到一个错误提示未知方法？