Question

我正在使用jQuery UI为搜索输入字段创建工具提示。然后我想根据浏览器窗口的大小定位工具提示（如果小于768px，则返回顶部，如果更多，则返回左侧）。

我用以下内容初始化工具提示：

$('#search').tooltip({'placement':'top'});

然后我有这个功能根据窗口大小改变位置：

$(window).on('resize', function() {
    if ($(window).width < 768) {
        $("#damSearch").tooltip({'placement':'top'});
    } else {
        $("#damSearch").tooltip({'placement':'left'});
    }
}).trigger('resize');

由于某种原因，它不起作用。工具提示初始化很好但是当我将浏览器调整到768px以上时，它仍然显示在顶部。

[编辑]

我已经离开了几天，刚刚回来尝试解决这个问题。我已经安装了Modernizr，因为我打算在网站的其他地方使用它，所以我想我会使用Modernizr.mq检测窗口大小调整。我还在其他地方读过，重新定位工具提示的代码应该在它自己的自包含函数中，所以这就是函数：

function positionTooltip() {
    if (Modernizr.mq('(min-width: 768px)')) {
        $("#damSearch").tooltip({'placement':'left'});
    } else {
        $("#damSearch").tooltip({'placement':'bottom'});
    }
}

然后在我的Javascript文件中跟随：

$(document).ready(function() {

    positionTooltip();
    // Fire the function on page load

    $(window).resize(positionTooltip);
    // Fire function on window resize event

不幸的是它仍然无法正常工作。首次加载页面时，工具提示显示正确，但如果我然后调整浏览器大小，则不会更新位置。如果我重新加载页面，但工具提示的位置会相应更改。

好像resize事件没有触发该功能。

[/ EDIT]

我们非常感谢所有的帮助和建议。贝。

Answer 1

你需要调用宽度函数

if ($(window).width() < 768) {

注意括号()

在窗口调整大小时更改工具提示的位置

1 个答案: