How to change the html 'title' attribute look?

Css:

/* vtip */
p#vtip { display: none; position: absolute; padding: 15px; left: 5px; font-size: 13px; background-color: #F6F6F6; border: 1px solid #E1E1E1; z-index: 9999; color: #DD471D; }
p#vtip #vtipArrow { position: absolute; top: -10px; left: 5px }


Jquery:

$(document).ready(function(){
    vtip();
});

var vtip = function () {
    var xOffset = -10;
    var yOffset = 10;
    $(".vtip").unbind().hover(function (a) {
        this.t = this.title;
        this.title = "";
        this.top = (a.pageY + yOffset);
        this.left = (a.pageX + xOffset);
        $("body").append('<p id="vtip" style="font-size: 13px;">' + this.t + "</p>");
        $("#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn(400);
    }, function () {
        this.title = this.t;
        $("#vtip").fadeOut(400).remove();
    }).mousemove(function (a) {
        this.top = (a.pageY + yOffset);
        this.left = (a.pageX + xOffset);
        $("#vtip").css("top", this.top + "px").css("left", this.left + "px");
    })
}

How to use? Html example:

...
<area shape="rect" class="vtip" coords="12,19,11,19" href="#"  title="Hotel" />
...

or

<a class="vtip" href="#">read more ></a>