更改窗口大小的工具提示位置

Change position of tooltip on window resize

本文关键字：工具提示 位置 窗口大小      更新时间：2023-09-26

我使用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事件没有触发函数。

(/编辑)

如往常一样，非常感谢所有的帮助和建议。托尼。

你需要调用width函数

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

注意括号()

相关文章：