.tip {
    position: relative;
    display: inline-block;
    over-flow:visible;
    z-index: 1000;
    .content {
        position: absolute;
        display: none;
        border: 1px solid #C8C8C8;
        background-color:#FFF;
        padding: 10px;
    }
    .top-right, .right-top, .tr, .rt {
        bottom: 15px;
        left: 15px;
    }
    .top-left, .left-top, .lt, .tl {
        bottom: 15px;
        right: 15px;
    }
    .bottom-right, .right-bottom, .bt, .tb {
        left: 15px;
    }
    .bottom-left, .left-bottom, .lb, .bl {
        right: 15px;
    }
}
.tip:hover {
    .content {
        display: block;
    }
}