Question

我正在使用 jQuery UI 工具提示插件。

如何根据窗口分辨率更改工具提示位置？

目前我还需要重新加载浏览器以使脚本生效。更改浏览器窗口大小时无法实时调整位置

var res = $(window).width();
var arr = {};
if(res < 960){
  arr = {my: "left+3 bottom-3", of: event, collision:"fit"};
}else{
  arr = {my: "left+153 top+20", collision: "flipfit" };    
}

init_tooltip(arr);

function init_tooltip(param){
  $('*[data-id]').tooltip({
      tooltipClass: "tooltipitem",
      content: '<div class="loading">Laden...</p>',
      hide: {
        effect: "slideData",
        delay: 0
      },
      position: arr,
  });
}

$('*[data-id]').hover(function (event, ui) {

            let $tooltip = $(this);
            let id = $tooltip.attr("data-id");

            ajaxManager.add({
                url: "../datenbank/itemscript.php",
                type: "GET",
                cache: "true",
                data: {
                    "var": id
                },

                success: function (data) {

                    console.log(data);

                    $tooltip.tooltip({
                        content: data
                    });
                }
            });
        });

Answer 1

您可以使用三元运算符：

var res = $(window).width();

$('*[data-id]').tooltip({
    tooltipClass: "tooltipitem",
    content: '<div class="loading">Laden...</p>',
    hide: {
        effect: "slideData",
        delay: 0
    },
     position: (res < 960 ? {my: "left+3 bottom-3", of: event, collision:"fit"} : { my: "left+153 top+20", collision: "flipfit" }),
});

否则经典

var res = $(window).width();


function init_tooltip(param){
  $('*[data-id]').tooltip({
      tooltipClass: "tooltipitem",
      content: '<div class="loading">Laden...</p>',
      hide: {
        effect: "slideData",
        delay: 0
      },
      position: param,
  });
}

捕捉窗口宽度的变化：

$(window).resize(checkWidth);

checkWidth();

function init_tooltip(param){
  $('*[data-id]').tooltip({
      tooltipClass: "tooltipitem",
      content: '<div class="loading">Laden...</p>',
      hide: {
        effect: "slideData",
        delay: 0
      },
      position: param,
  });
}


function checkWidth(){
    var res = $(window).width()
    var arr = {};
    if(res < 960){
      arr = {my: "left+3 bottom-3", of: event, collision:"fit"};
    }else{
      arr = {my: "left+153 top+20", collision: "flipfit" };    
    }

    init_tooltip(arr);

}

jQuery 工具提示的定位

1 个答案: