jQuery Position

by rtcherry

HTML

<div id="container">
    <div id="box">This is my box.</div>
    <div id="tip">This is my tip.</div>
</div>

CSS

#container {
    border: 2px solid #000;
    height: 100px;
    width: 200px;
}
#box {
    border: 1px solid #f00;
    position: relative;
    top: 20px;
    left: 60px;
    width: 125px;
}
#tip {
    border: 1px dashed #00f;
    height: 35px;
    width: 180px;
}

JavaScript

var $container = $('#container'),
    $box = $('#box'),
    $tip = $('#tip'),
    $data = $('#data');

var callback = function(position, data) {
    data.element.element.css(position);
    console.log('Position: ', position);
    console.log('Data: ', data);
}

$tip.position({
    my: 'center bottom-5',
    at: 'center top',
    of: $box,
    collision: 'flipfit flip',
    within: $container,
    using: callback
});