jQuery UI .position using function

Question

So I'm trying to make a tooltip and want to be able to change the pointer location when collision is detected i have seen that this can be done with using option but when i try it the tooltip does not move. I see in the console.log that it's working and the arrow does move so why isn't the tooltip? When i remove the using option then the tooltip moves. please excuse the naming and roughness as this is just a quick draft.

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

That's because you are only setting the .position of the #class (the arrow) and not the #tooltip . You will need to set the position of both. So you would do something like:

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

So you might do something like this for the bottom position (depending on how you want to position things):

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