Clickable Tooltips in jQuery UI

Probably a better way to merge the content into the options?

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<script src="http://www.math.cmu.edu/~gautam/share2/plugins/jQuery.pTooltip/jQuery.pTooltip.js"></script>
<p>
   Lorem Ipsum <span title="" id="t1">some text</span> to get started 
    <br/><br/><br/><br/> and also
    <span title="" id="t2">some more text</span> later.
</p>

CSS

span{font-weight: bold;}

JavaScript

function setClickableTooltip(target, content){
    $( target ).tooltip({
        show: { effect: "fadeIn"}, // show immediately 
        content: content, //from params
        hide: { effect: "fadeOut"},
        close: function(event, ui){
            ui.tooltip.hover(
                function () {
                    $(this).stop(true).fadeTo(400, 1); 
                },
                function () {
                    $(this).fadeOut("400", function(){
                        $(this).remove(); 
                    })
                }
            );
        }  
    });
}
$(document).ready(function(){
    setClickableTooltip('#t1', "some basic content");
    setClickableTooltip(
        '#t2',
        'diff content with <a href="http://abbysdoor.com">link</a> :)'
    );
});