如何根據屏幕大小（重新）初始化具有不同選項的工具提示？

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

如何在重新調整大小以及窗口寬度是否大於641px的情況下如何獲取插件？ 我嘗試使用CSS，但我必須使用!important標志來覆蓋由tooltip插件生成的內聯JS，這是不贊成的。

Answer 1

首先使用destroy 方法 ，然后重新初始化工具提示：

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

    }
});

Answer 2

我會嘗試將其全部寫為一個jQuery函數：

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