A jQuery mini tooltip

This little plug-in will create a data-tip attribute with content found from the element, or text which can be set. It then removes any native tooltip and shows a custom solution instead.

by Justin

HTML

<h1>Mini tool tips</h1>

<h2>Links</h2>
<p>Mixtape gluten-free tattooed, single-origin coffee blog cred viral. Keytar banksy fingerstache, <a href="#" title="Oh look, a linky linky. Click me!">Austin small batch</a> wes anderson dreamcatcher leggings authentic pop-up. Swag williamsburg chillwave 3 wolf moon pour-over mixtape. Lomo messenger bag butcher lo-fi. Carles hella lomo art party, chillwave marfa odd future narwhal aesthetic ennui seitan blog sartorial thundercats portland. Retro pour-over pinterest, butcher kogi kale chips trust fund mlkshk ethical viral brooklyn. Mumblecore marfa etsy, VHS farm-to-table sartorial semiotics.</p>

<h2>Images</h2>
<p><a href="http://placekitten.com/">http://placekitten.com/</a> <img src="http://placekitten.com/200/300" alt="Oh look, a kitteh!" />Lomo ennui mumblecore, locavore readymade artisan cosby sweater wes anderson truffaut brunch jean shorts fingerstache swag. Sustainable authentic whatever brooklyn irony small batch mlkshk. Put a bird on it cred odd future tofu art party, trust fund dreamcatcher irony thundercats portland seitan authentic tattooed you probably haven't heard of them cardigan. Seitan squid vinyl sriracha. Brooklyn wes anderson blog master cleanse, gentrify mustache freegan cred fap post-ironic butcher jean shorts godard. Post-ironic mumblecore odd future truffaut sriracha scenester 3 wolf moon organic, american apparel etsy echo park biodiesel. Next level umami terry richardson, yr fixie PBR retro high life artisan mixtape post-ironic.</p>

<h2>Lists</h2>
<ul>
    <li>This is list item 1<span>Item 1</span></li>
    <li>This is list item 2<span>Item 2</span></li>
    <li>This is list item 3<span>Item 3</span></li>
    <li>This is list item 4</li>
</ul>

<h2>Forced</h2>
        <p><a href="http://hipsteripsum.me/">http://hipsteripsum.me/</a>Terry richardson keytar artisan cliche, cardigan blog carles single-origin coffee ennui chillwave tattooed irony letterpress quinoa four loko. <span>This span has a...

CSS

*{margin:0; padding:0;}
body{padding:50px;}
h1{font:bold 20px/26px Arial; padding-bottom:10px;}
h2{font:bold 14px/20px Tahoma; clear:left;}
p,ul{font:normal 12px/18px Tahoma; padding-bottom:10px;}
li span{display:none;}
img{float:right; padding:0 0 10px 10px;}
a,span{color:red;}

.miniToolTip{
    position:absolute;
    top:0;
    left:0;
    width:150px;
    padding:10px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 7px #808080;
    -moz-box-shadow: 1px 1px 7px #808080;
    box-shadow: 1px 1px 7px #808080;
    border: 1px solid #000000;
    background-color: #ffffff;     
}
.miniToolTip span{
    position:absolute;
    bottom:-30px;
    left:12px;
    height:0;
    width:0;     
    border:solid 15px #000;
    border-left-color:transparent;
    border-right-color:transparent;
    border-bottom-color:transparent;
}

JavaScript

(function($) {
    $.fn.extend({
        miniToolTips: function(options) {
            var defaults = {
                text: "",
                selector: "",
                html: "<div><span></span></div>",
                className: "miniToolTip",
                leftOffset: 0,
                topOffset: 15,
                msIn: 200,
                msOut: 100,
                animationDistance: 15,
                hoverDelay: 300
            },
                tip, timer, o = $.extend(defaults, options);

            function setDataAttribute(el) {
                var content = "";
                if (o.text !== "") {
                    content = o.text;
                } else if (el.alt !== undefined) {
                    content = el.alt;
                } else if (el.title.length > 0) {
                    content = el.title;
                } else if (el.href !== undefined) {
                    content = el.href;
                } else if (o.selector !== "") {
                    content = $(el).find(o.selector).html();
                } else {
                    content = $(el).html();
                }
                $(el).removeAttr('title alt').attr('data-tip', content);
            }

            function createToolTip(el) {
                var offset = $(el).offset();
                tip = $(o.html)
                    .addClass(o.className)
                    .append($(el).attr('data-tip'))
                    .css('opacity', 0)
                    .appendTo(document.body);
                tip.css({
                    'top': offset.top - tip.outerHeight() - o.animationDistance - o.topOffset,
                    'left': offset.left - o.leftOffset
                }).animate({
                    opacity: 1,
                    top: '+=' + o.animationDistance
                }, o.msIn, 'swing');
            }

            function removeToolTip() {
                $("." + o.className).stop(true).animate({
                    opacity: 0,
     ...