JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/pepper-grinder/jquery-ui.css">
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element.</p>

CSS

p {
    text-align:center;
}

.ui-tooltip.menu_info {
    max-width: 200px;
}  

* html .ui-tooltip {
    background-image: none;
}
body .ui-tooltip { border-width: 1px; }
    .ui-tooltip, .arrow:after, .arrow_left_side:after {
        background: white;
        border: 1px solid #999;       

    }       
    .ui-tooltip {
        padding: 10px 12px;
        color: Black;
        font: 8pt "Helvetica Neue", Sans-Serif;   
        max-width: 150px;
        border: 1px solid #999;
    position: absolute;
    }           
    .arrow_left_side {       
        height: 70px;
        width: 10px;    
        overflow: hidden;
        position: absolute;
        top: 0px;
        margin-top: -5px;
        left: -10px;
    }   
    .arrow_left_side:after {
        content: "";
        position: absolute;
        width: 25px;    height: 25px;
        -webkit-transform-origin: 5px 25px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        tranform: rotate(45deg);
    }

JavaScript

$('a').tooltip({
    position: {
        my: "left+20 center",
        at: "right center",
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
            .addClass("arrow_left_side")
            .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
        }
    }
});