qTip2 - My test case

by Akkuma

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<a href="#test" tooltip="Do it mofos" title="Tooltip text">Sample link</a>

CSS

/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: 2.0.0pre
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Tue Jun 7 23:53:32 2011 +0100
*/

/* Core qTip styles */
.ui-tooltip, .qtip{
    position: absolute;
    left: -28000px;
    top: -28000px;
    display: none;

    max-width: 280px;
    min-width: 50px;
    
    font-size: 10.5px;
    line-height: 12px;

    z-index: 15000;
}

    /* Fluid class for determining actual width in IE */
    .ui-tooltip-fluid{
        display: block;
        visibility: hidden;
        position: static !important;
        float: left !important;
    }

    .ui-tooltip-content{
        position: relative;
        padding: 5px 9px;
        overflow: hidden;
        
        border-width: 1px;
        border-style: solid;
        
        text-align: left;
        word-wrap: break-word;
        overflow: hidden;
    }

    .ui-tooltip-titlebar{
        position: relative;
        min-height: 14px;
        padding: 5px 35px 5px 10px;
        overflow: hidden;
        
        border-width: 1px 1px 0;
        border-style: solid;

        font-weight: bold;
    }

    .ui-tooltip-titlebar + .ui-tooltip-content{ border-top-width: 0px !important; }

        /*! Default close button class */
        .ui-tooltip-titlebar .ui-state-default{
            position: absolute;
            right: 4px;
            top: 50%;
            margin-top: -9px;

            cursor: pointer;
            outline: medium none;

            border-width: 1px;
            border-style: solid;
        }
        
        * html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */

        .ui-tooltip-titlebar .ui-icon,
        .ui-tooltip-icon .ui-icon{
            display: block;
            text-indent: -1000em;
        }

  ...

JavaScript

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('a').qtip(
     {
         content: { attr: 'tooltip' }
     });
 });