javascript - jQuery UI .position 使用函数

Question

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

Javascript

$( 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

这是因为您只设置了#class(箭头)的.position，而不是#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"                    
});

Fiddle Example