Using JQuery Cluetip

HTML

<script src="http://cdn.dp.technion.ac.il/cluetip/jquery.cluetip.js"></script>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum posuere accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit lorem id nulla commodo non rutrum enim vestibulum. <a class="tipper" title="foo is a magoo|and so are you">Pellentesque</a> dapibus magna in urna laoreet quis mattis risus sodales. Ut quis augue est, et facilisis mauris. Ut a nunc in urna interdum rutrum sed quis sem. Nunc tempus adipiscing dui vitae interdum. Donec dapibus, ipsum et elementum pharetra, dolor tellus fermentum felis, egestas lobortis diam mauris in dui. Suspendisse pellentesque nibh vitae justo sollicitudin sodales lobortis ligula viverra. Phasellus sollicitudin urna vitae neque auctor euismod. Curabitur et ligula nunc. Nam euismod quam et sem dapibus eu tristique ligula ullamcorper.
</div>

<hr/>
<pre>
$.fn.cluetip.defaults = {  // default options; override as needed
    multiple:         false,    // Allow a new tooltip to be created for each .cluetip() call
    width:            275,      // The width of the clueTip
    height:           'auto',   // The height of the clueTip. more info below [1]
    cluezIndex:       97,       // Sets the z-index style property of the clueTip
    positionBy:       'auto',   // Sets the type of positioning. more info below [2]
    topOffset:        15,       // Number of px to offset clueTip from top of invoking element. more info below [3]
    leftOffset:       15,       // Number of px to offset clueTip from left of invoking element. more info below [4]
    local:            false,    // Whether to use content from the same page for the clueTip's body
                                // (treats the attribute used for accessing the tip as a jQuery selector,
                                // but only selects the first element if the selector matches more than one)....

CSS

a {
    color:blue;
}

#cluetip {
    background-color: pink;
    text-align:center;
}

TypeScript

$(function(){
    $('a.tipper').cluetip({splitTitle : '|'});
})