jquery ui - position

by A B

HTML

<br/><br/><br/><br/>

<div id="element1">
  qui
  <div class="box">&nbsp;</div>
</div>

<span id="order_toolbar" class="ui-widget-header ui-corner-all" style="display:none;">
  <button id="beginning">go to beginning</button>
  <button id="rewind">rewind</button>
  <button id="play">play</button>
  <button id="stop">stop</button>
  <button id="forward">fast forward</button>
  <button id="end">go to end</button>
</span>

CSS

.box
{
  height: 100px;
  width: 100px;
  background-color: red;
}

JavaScript

$(document).on({
            mouseenter: function () {
                $("#order_toolbar").show();                                  $(".order_toolbar").position({
                    of: $('#element1'),
                    my: "left bottom",
                    at: "left top",
                    offset: '800',
                    collision: "none none"
                });
            },
            mouseleave: function () {
                $("#order_toolbar").hide();
            }
        }, '#element1');