javascript - Change position of tooltip on window resize -


i'm using jquery ui create tooltip search input field. want position tooltip according size of browser window (top if less 768px, left if more).

i initialise tooltip with:

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

then have function change placement depending on window size:

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

for reason it's not working. tooltip initialises fine when resize browser above 768px still appears positioned top.

[edit]

i've been away few days , have come try , resolve problem. i've installed modernizr because intend using elsewhere on site , thought i'd use modernizr.mq detect window resizing. read elsewhere code reposition tooltip should in own self contained function, function:

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

this followed in javascript file with:

$(document).ready(function() {      positiontooltip();     // fire function on page load      $(window).resize(positiontooltip);     // fire function on window resize event 

unfortunately it's still not working correctly. tooltip appears correctly positioned when page first loaded, if resize browser position not updated. if reload page tooltip's position changed accordingly.

it's if resize event not triggering function.

[/edit]

as ever , advice appreciated. tony.

you need call width function

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

notice parentheses ()


Comments