Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle]
$(function () {
$(document).tooltip({
var wi = $(window).width();
if (wi <= 800){
position: {
my: "left+190 top",
at: "center top"
},
} else {
position: {
my: "left+20 top",
at: "center top" }, }
content: function () {
return $(this).prop('title');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("300", function () {
$(this).remove();
})
});
}
});
});