Edit in JSFiddle

$(function() {
    $('#tooltip')
    .mouseover(function(e) {
        $('#tip:not(:animated)')
        .text($(this).data('tips'))
        .css({
            top: e.pageY +10,
            left: e.pageX +35,
        })
        .fadeIn(500);
    })
    .mouseout(function (e) {
        $('#tip')
            .fadeOut(500);
    });
});

<div id="tooltip" data-tips="ツールチップです。">ツールチップ</div>
<div id="tip"></div>

#tip{
    cursor:pointer;
    position:absolute;
    display:none;
    background-color: rgba(225,101,174,0.6);
    color:#FFF;
}
#tooltip{
    padding: 20px;
    border:dashed 1px #e1656d;
}