本文介绍了如何根据屏幕大小使用不同的选项(重新)初始化工具提示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
因此,我将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,这是不受欢迎的。
推荐答案
先使用destroy
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);
}
});
这篇关于如何根据屏幕大小使用不同的选项(重新)初始化工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!