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

Question

I'm using jQuery UI to create a tooltip for a search input field. I then want to position the tooltip according to the size of the browser window (top if less than 768px, left if more).

I initialise the tooltip with:

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

Then I have this function to change the placement depending on the window size:

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

For some reason it's not working. The tooltip initialises fine but when I resize the browser above 768px it still appears positioned to the top.

[EDIT]

I've been away for a few days and have just come back to try and resolve this problem. I've installed Modernizr because I intend using it elsewhere on the site and so I thought I'd use Modernizr.mq to detect the window resizing. I also read elsewhere that the code to reposition the tooltip should be in its own self contained function, so this is the function:

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

This is then followed in my Javascript file with:

$(document).ready(function() {

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

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

Unfortunately it's still not working correctly. The tooltip appears correctly positioned when the page is first loaded, but if I then resize the browser the position is not updated. If I reload the page however the tooltip's position is changed accordingly.

It's as if the resize event is not triggering the function.

[/EDIT]

As ever all help and advice is greatly appreciated. Tony.

Answer 1

you need to call the width function

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

notice the parentheses ()