javascript - 如何根据屏幕尺寸(重新)使用不同的选项初始化工具提示？

Question

因此，我将 tooltipster.js 库用于工具提示，并尝试更改工具提示在不同屏幕尺寸上的默认距离。

所以这是默认的 init 的样子:

  $(inputTooltipTrigger).tooltipster({
    distance: 24,
    theme: 'test',
    trigger: 'custom'
  });

如果窗口宽度大于641px，则距离变为6

  if ($(window).width() > 641){
    $(inputTooltipTrigger).tooltipster({
      distance: 6,
      theme: 'test',
      trigger: 'custom'
    });
  }

如果窗口调整大小后大于641px，则距离变为6

  $(window).resize(function(){
    if ($(window).width() > 641){
      $(inputTooltipTrigger).tooltipster({
        distance: 6,
        theme: 'test',
        trigger: 'custom'
      });
    }
  });

如果窗口宽度大于 641 像素，我怎样才能让插件在调整大小时重新初始化？我尝试使用 CSS，但我必须使用 !important 标志来覆盖工具提示插件生成的内联 JS，这是不受欢迎的。

Answer 1

使用销毁 method首先，然后重新初始化工具提示:

$(window).resize(function() {

    if ($(this).width() > 641) {

        $(inputTooltipTrigger).tooltipster('destroy'); // no callback method, so try a setTimeout to re-initialize

        setTimeout(function () {
            $(inputTooltipTrigger).tooltipster({
                distance: 6,
                theme: 'test',
                trigger: 'custom'
            });
        }, 250);

    }
});