jQuery UI Tooltips

Proof of concept to implement.

by cmoreira

HTML

<link rel="stylesheet" href="http://view.jqueryui.com/master/themes/base/jquery.ui.all.css">
<script src="http://view.jqueryui.com/master/ui/jquery.ui.widget.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.tooltip.js"></script>
<h1>Hello tooltips</h1>

<div id="tooltips">
    <p>This is a paragraph of text and demonstrates <span class="tip highlight" title="This is a tooltip title">tooltips</span> very nicely.</p>
    
    <p>This is just a span with a <span class="highlight" title="This is a title">title</span></p>
    
    <p>This is another span but with a <span class="tip highlight" title="This is<br />a <span class='highlight'>tooltip</span>">html tooltip</span> this time.</p>
    
    <p>This shows <span class="tip-info highlight" title="<span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>Sone interesting and useful information">information</span>.  Oh no!  Watch out for the <span class="tip-warn highlight" title="Danger! Will Robinson!">warning</span>.</p>
    
    <p>I'm going to show you some html content from a hidden div within the dom right <span id="dom_tip" title="" class="highlight">here</span>.</p>
    
    <p>Date input: <input type="text" class="datepicker" /></p>
    
    <div class="hide" id="dom_tip_info"><p>This shows information about your profile.<br>Your current profile is indicated by a &gt;</p><p><a class="right" target="_blank" href="http://en.wikipedia.org/wiki/List_of_common_misconceptions">Read more</a>
        </p></div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 10pt;
}
h1 {font-size: 1.5em;}
p {margin-top: 0.5em;}
.highlight {background-color: yellow;}
.hide {display: none;}

JavaScript

// jQuery UI Tooltips proof of concept.

(function() {
    
    
    
    
    var $tooltips = $('#tooltips');
    $tooltips.find('.tip').tooltip();
    $tooltips.find('.tip-info').tooltip({
        tooltipClass: 'ui-state-highlight',
        position: {
            my: "left bottom",
            at: "center top"
        }
    });
    $tooltips.find('.tip-warn').tooltip({
        tooltipClass: 'ui-state-error',
        position: {
            my: "right center",
            at: "left center"
        }
    });
   

}());