I have been trying to change the jQuery UI tooltip position based on screen width, but I can't get it to work. [fiddle] Would anyone please show me how to detect the width of the browser and change the tooltip position accordingly?
$(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();
})
});
}
});
});
This is not valid code:
$(document).tooltip({
var wi = $(window).width();
if (wi <= 800){
position: {
my: "left+190 top",
at: "center top"
},
}
else {
The tooltip
plugin accepts an options object
, it is not a function body to write arbitrary code within. Move your conditional window size logic outside of the tooltip:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.