How to position an arrow based on the position of a different object on the page in Javascript/Mootools

Question

I've created a script that positions a box on page based off of the position of an element on hover. Works just fine, however in addition the moving said box, I want to position an arrow inside the box to point at the hovered over element. I just can't figure out how to though.

I've tried positioning it horizontally similarly to how I positioned it vertically using, but that doesn't even come close to being correct. My javascript:

docSize = $('innerbody').getSize();
hint_obj = $('hint_obj');
hint_arr = hint_obj.getChildren('.hint_arr')[0];

$$('.item').addEvents({
    mouseenter: function(e) {
        var el = e.target;
        var elemPosition = el.getPosition();
        hint_obj.setStyle('bottom', (docSize.y - elemPosition.y - 80));
        hint_arr.setStyle('left', (docSize.x - elemPosition.x));
    },
    mouseout: function(e) {
        hint_obj.setStyle('bottom', null);
    }
});

I've made a mockup of what I'm attempting to do here: http://jsfiddle.net/0jowade8/2/

Any advice would be appreciated.

Answer 1

As Dimitar Christoff mentioned, it can be solved with CSS only by using :after pseudo-element.

.item:hover:after {
    border-bottom: 14px solid rgba(255, 255, 255, 1);
    border-left: 14px solid rgba(0, 0, 0, 0);
    border-right: 14px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    top: 66px;
    left: 26px;
}

FIDDLE