qTip2 - My test case

by kiddailey

HTML

<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<p style="text-align: center; margin-bottom: 10px;"><a class="selector" href="#" title="<div><h4>RECUERDA</h4><p>Ocupación máxima</p><p>4 pers / hab</p><p>Adultos más niños</p></div>">Tooltip Trigger</a></p>
<p>Facilisis praesent enim nulla. Consectetuer suscipit sed suscipit sed elit dolore facilisi ad, esse duis ut te, eu ullamcorper eu duis te dolor aliquip illum? Vel eros enim eros diam sed eu illum dolor elit autem nulla iusto, autem at. Dolore dignissim consequat ea sit delenit ut nulla dolore erat ut veniam. Ullamcorper accumsan ex ut crisare sciurus elit vel aliquam velit nisl vero nulla duis lobortis, consectetuer lobortis duis ad. Sed lobortis lorem consequat in autem iusto qui autem nibh exerci vel qui nostrud enim nulla, accumsan ad ut minim aliquip? 
Nulla ex ea molestie illum nulla consequatvel vero et iusto duis in, quis delenit dignissim, dolore nonummy. Ea esse ut consectetuer consequat, vero nostrud, consequat veniam. Vulputate nisl ad, ullamcorper consequat velit nibh, consequat at, molestie eu facilisis autem vel luptatum, esse velit iusto. Accumsan quis wisi tincidunt, consequat ea vel ut commodo vulputate tation dolor te exerci et, sit ad eu. Ex nostrud et at dolore autem, duis suscipit dolore iusto qui accumsan dolore, accumsan eu consequatvel sed quis enim! Illum feugiat praesent lobortis ex quis feugait autem ex consequat delenit at commodo et consectetuer feugait! In blandit lorem illum erat nonummy dignissim molestie blandit, praesent suscipit esse commodo veniam iusto nibh. Illum vel odio consequat vel te vulputate enim erat dolore praesent eum minim lobortis consequatvel vero praesent. 
Ipsum accumsan ipsum ullamcorper sciurus minim, qui facilisi esse nostrud ut! Esse vel enim vel aliquam esse enim eros in ut autem veniam et vel erat accumsan...

CSS

body
{
    background-color: #def;
}

.doubleborder .ui-tooltip-content
{
    background-color: rgba(60,60,60,0.95);
    color: #fff;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-color: #555;
    width: 120px;
    text-align: center;
    font-family: arial, sans-serif;
    line-height: 1.25em;
    padding: 2px;
}

.doubleborder .ui-tooltip-content div
{
    background-color: rgba(40,40,40,0.95);
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
}

.doubleborder .ui-tooltip-content h4 {
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 5px;
}

JavaScript

$(document).ready(function()
{
    $('.selector').qtip({
        position: {
            my: 'top center',
            at: 'bottom center'
        },
        style: {
            classes: 'doubleborder',
            tip: {
                width: 6,
                height: 4
            }
        }
        
    });
});