如何根据屏幕大小使用不同的选项(重新)初始化工具提示?

How to (re)initialize tooltip with different options depending on screen size?(如何根据屏幕大小使用不同的选项(重新)初始化工具提示?)
本文介绍了如何根据屏幕大小使用不同的选项(重新)初始化工具提示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

因此,我将Tooltipster.js库用于工具提示,并尝试在不同的屏幕大小上更改工具提示的默认距离。

下面是默认初始化的外观:

  $(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标志来覆盖由工具提示插件生成的内联JS,这是不受欢迎的。

推荐答案

先使用destroymethod,然后重新初始化工具提示:

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

    }
});

这篇关于如何根据屏幕大小使用不同的选项(重新)初始化工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

initialising a global mixin in weex我使用 weex create awesome-project 初始化了一个 weex 和 vue 应用程序。在 entry.js 文件中,我试图注册一个全局 mix...
How to initialize the Vue app depending on back-end response first?(如何先根据后端响应初始化Vue APP?)
Conditionally initializing a constant in Javascript(在Javascript中有条件地初始化一个常量)
VueJS - How to initialize a template dynamically with the result of an ajax call(VueJS - 如何使用 ajax 调用的结果动态初始化模板)
How to reinitialize flexslider for a dynamic loading(如何重新初始化 flexslider 以进行动态加载)
Vue.js: How to fire a watcher function when a component initializes(Vue.js:如何在组件初始化时触发观察器函数)