Showing content by sliding left and up

Question

I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/

Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.

HTML:

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div id="item_add">
    <header>X</header>
    <div class="body">
        Content
    </div>
</div>

JS:

$(document).on('mouseenter', '.item', function( event ) {
    var menue = $('#item_add');
    var item = $(this);
    menue.css({ "top": item.offset().top + 35 }).show();
});

CSS:

.item {
    border: 1px solid #e2e2e2; 
    margin: 6px;
    padding: 0px 10px 0px 10px;
    position: relative; 
    height: 40px;
    }
.wrap {
    margin-left: 8em;
}
#item_new {
    border: 1px dashed #C0C0C0 !important;
    background: none repeat scroll 0% 0% #F7F7F7;
    display: block;
    height: 2.2em;
    margin: 6px;
    padding: 0px 10px;
    position: relative;
}

#item_add {
    display: none;
    position: absolute;
    left: 5.5em;
    width: 2em;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    color: #aaa;
    padding: 0px 6px;

    -webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
       -moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
        -ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
         -o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
            transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}

#item_add:hover {
    width: 7em;
    left: .5em;

    -webkit-transition-delay: 0s;
       -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
         -o-transition-delay: 0s;
            transition-delay: 0s;
}

#item_add:hover .body {
    max-height: 100px;
    visibility: visible;

    -webkit-transition-delay: 200ms;
       -moz-transition-delay: 200ms;
        -ms-transition-delay: 200ms;
         -o-transition-delay: 200ms;
            transition-delay: 200ms;
}

#item_add .body {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;

    -webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
       -moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
        -ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
         -o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
            transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
    content: '';
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent #f7f7f7;
    top: 5px;
    right: -7px;
    position: absolute;
}
#item_add button {
    background: none repeat scroll 0px center #fff;
    padding: 0.2em 2em;
    margin: 3px .2em;
}

Answer 1

I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top .

I mean something like this: http://jsfiddle.net/7n9jxo9c/8/

Answer 2

use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/

#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}