JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.lookr.com/_script/extern/jQuery/ui/1.10.4accordion,slider,tooltip.js"></script>

    <h3>Wrong class '.left' instead of '.right'</h3>
    <div> <a href="#" style="padding:0" title="Tooltip"><ins></ins></a></div>

CSS

hr {
    clear:right;
}
a {
    float:right;
    padding:.75em;
    background:orange;
}

ins {
    display:inline-block;
    width:10px;
    height:10px;
}
.ui-tooltip {
    position:absolute;
    background:black;
    color:white;
}
.ui-tooltip.right::after {
    content:"<right>";
}
.ui-tooltip.left::before {
    content:"<left>";
}

JavaScript

$(document).tooltip({
	    show: true,
	    hide: false,
	    position: {
	        my: 'center top',
	        at: 'center bottom+7.5',
	        using: function (position, feedback) {
	            $(this).css(position);
	            $(this).addClass(feedback.horizontal);
	            $(this).addClass(feedback.vertical);
	        }
	    }
	});