Tooltip styling

// **Java snippet below.** //

$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
             // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
            // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                .css({ top: mousey, left: mousex })
        });
});




// **HTML Snippet below** //

<span style="color: #000;"><a class="masterTooltip" title="ENTER WHAT YOU WANT IT TO SAY ON HOVER HERE!" href="https://roleplay.chat/profile.php?user=LINK" target="_blank"></a></span>

// **CSS styling below** //

.tooltip {
	display:none; position:absolute; max-width: 150px; padding: 10px;
	border:1px solid #fff;
	background: #000;
z-index: 14;
	font-family: calibri; font-size: 10px; letter-spacing: 1px; color: #fff;

}