启用/禁用动态引导工具提示
启用/禁用动态引导工具提示
提问于 2019-03-12 14:18:39
我想让工具提示为动态内容工作。但我也希望根据屏幕大小启用/禁用。
我想要发生的事情:如果屏幕小于768，我想禁用工具提示。如果屏幕大于768，我希望启用它。
到目前为止我有这样的想法：
function tooltip(){
if (window.innerWidth <= 768) {
$('[data-toggle="tooltip"]').tooltip("disable");
} else {
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-13 02:05:02
由于您使用的是工具提示委托，而且我们不能在媒体查询中更改元素属性，因此当视口宽度发生变化时，需要销毁/重新生成每个工具提示。
使用委托的工具提示不能单独销毁，但必须由$('body').tooltip('destroy') / $('body').tooltip('dispose')在4.x中删除。
现在，将tooltip()函数设置为一个onresize处理程序，在视口宽度低于可接受范围时重置selector。与空选择器不同，您可以返回trigger: 'manual'，或者更好的是根本不初始化工具提示：
window.onresize = tooltip = function() {
$('body').tooltip('destroy')
$('body').tooltip({
selector: window.innerWidth > 768 ? '[data-toggle="tooltip"]' : ''
})
}
tooltip()在iframe这里演示-> http://jsfiddle.net/gpmcxaeL/2/
NB：上面的内容只能在用户动态更改视图端口大小的环境中使用。若要在移动、桌面等方面有不同的工具提示规则，请在声明式标记/响应设计中解决这一问题。
Stack Overflow用户
发布于 2019-03-12 15:48:37
--请试试这个：
您必须在头页中添加jQuery。
if (window.innerWidth <= 768) {
$('[data-toggle="tooltip"]').tooltip("disable");
} else {
$("[data-toggle='tooltip']").tooltip();
}
$(window).resize(function() {
if (window.innerWidth <= 768) {
$('[data-toggle="tooltip"]').tooltip("disable");
} else {
$("[data-toggle='tooltip']").tooltip("enable");
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55123702
复制相关文章
相似问题
腾讯云开发者
