jQuery Tooltips with Arrows

A quick example to show how you can use the ::before and ::after pseudo elements to create arrows to be used with jQuery UI's tooltip widget.

by burki

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>


<div>
    <input type="text" title="I am a tooltip!" />
</div>

CSS

body { padding: 20px; }

input[type="text"] { margin: 100px 0 0 200px; }

.ui-tooltip {
    background: #666;
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}
.right .ui-tooltip-content::after {
    top: 18px;
    left: -10px;
    border-color: transparent #666;
    border-width: 10px 10px 10px 0;
}

JavaScript

$(document).ready(function() {
    var position = { my: 'left center', at: 'right+10 center' };   
    position.collision = 'none';
    $('input[type="text"]').tooltip();
    //$('input[value="right"]').trigger('change');
    $('input[type="text"]').tooltip('option', 'position', position);
    $('input[type="text"]').tooltip('option', 'tooltipClass', 'right');
    
});