jQuery UI .position使用函数

Question

因此，我尝试制作一个工具提示，并希望能够在检测到碰撞时更改指针位置，我已经知道可以使用using选项完成操作，但是当我尝试使用它时，工具提示不会移动。 我在console.log中看到它正在工作，并且箭头确实在移动，所以为什么工具提示不存在？ 当我删除using选项时，工具提示会移动。 请原谅一下命名和粗糙程度，因为这只是快速草稿。

Java脚本

$( document ).mousemove(function( event ) {
  $( "#div" ).position({
    my: "right",
    of: event,
    collision: "none"
  });


  $( "#tooltip" ).position({
        my: "bottom",
        at: "center top-14",
        of: "#div",
        collision: "flipfit",
        using: function( pos, pos1 ) {
                arrow(pos1.vertical);
            }
  });



});


function arrow(pos1){
    if(pos1 == "top") {
                    console.log('its top')
                    $( "#class" ).position({
                        my: "bottom",
                        at: "center top",
                        of: "#div",
                        collision: "flipfit"
  });
                }else{
                    console.log('its bottom')
                    $( "#class" ).position({
                        my: "top",
                        at: "center bottom",
                        of: "#div",
                        collision: "flipfit"
                    });
                }
}

的HTML

<span id=class></span>
    <div id=tooltip class=tooltipdown>this is the tooltip and longerish</div>
    <div id=div>This is the div that<br> needs the tooltip on</div>

的CSS

#tooltip{
            display: inline-block;
            position: relative;
            background: red;
            margin-right: 10px;
            margin-left: 10px;
        }

        #class{
            top: 100%;
            border: solid transparent;
            content: "";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-top-color: red;
            border-width: 7px;
            margin-right: 20px;
            margin-left: 20px;
        }
        #div {
            background: blue;
            display: inline-block;
        }

Answer 1

那是因为你只设置.position中的#class （箭头），而不是#tooltip 。 您将需要设置两者的位置。 因此，您将执行以下操作：

$( "#tooltip" ).position({
    ...
 });
$("#class").position({
    ...                  
});

因此，您可以对底部位置执行以下操作（取决于您要放置的内容的方式）：

console.log('its bottom')
$( "#tooltip" ).position({
    my: "top",
    at: "center bottom",
    of: "#div",
    collision: "flipfit"
});
$("#class").position({
    my: "top",
    at: "center bottom",
    of: "#tooltip",
    collision: "flipfit"                    
});

小提琴的例子