jQuery Tooltip

by Kyle Mitofsky

HTML

<p>
    <label for="age">Your age:</label>
    <input id="age" title="We ask for your age only for statistical purposes."/>
</p>
<p>Hover the field to see the tooltip.</p>











<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/23498641/1366033'>How do I make rounded Jquery UI tooltips?</a><br/>
    Documentation: <a href='http://jqueryui.com/tooltip/'>jQuery - UI - Tooltips</a><br/>
<div>

CSS

label {
     display: inline-block;
     width: 5em;
 }
 .ui-tooltip {
     position: absolute;
     background: #f9a235;
     color: #fff;
     padding: 6px 0px;
     border-radius: 25px;
 }

JavaScript

$(function () {
     $(document).tooltip();
 });