test tipsy

HTML

<script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">
   <body>
     <div class="tip">5. I am a span with a tip in my info element
        <div class="info 5">
            <h6>header 5</h6>
            <div class="imageBorder">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Human_Thumbnail.JPG/80px-Human_Thumbnail.JPG"/>
            </div>
            <p>This is the content of the info box inside the span-tag</p>
            <p>This is a second paragraph inside the info box 5 - can put an a-tag link here 
                <a href="#">someplace.</a>
            </p>
        </div>
    </div>
    
        <div class="tip">5. I am a span with a tip in my info element
        <div class="info 5">
            <h6>header 5</h6>
            <div class="imageBorder">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Human_Thumbnail.JPG/80px-Human_Thumbnail.JPG"/>
            </div>
            <p>This is the content of the info box inside the span-tag</p>
            <p>This is a second paragraph inside the info box 5 - can put an a-tag link here 
                <a href="#">someplace.</a>
            </p>
        </div>
    </div>
        <div class="tip">5. I am a span with a tip in my info element
        <div class="info 5">
            <h6>header 5</h6>
            <div class="imageBorder">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Human_Thumbnail.JPG/80px-Human_Thumbnail.JPG"/>
            </div>
            <p>This is the content of the info box inside the span-tag</p>
            <p>This is a second paragraph inside the info box 5 - can put an a-tag link here 
                <a href="#">someplace.</a>
            </p>
        </div>
    </div>


   </body>

CSS

body {padding: 50px; padding-top: 100px}

.tipsy { font-size: 14px; font-family: Verdana;}
.tipsy-inner {box-shadow: 0px 0px 7px #28333D; -webkit-box-shadow: 0px 0px 7px #28333D; -moz-box-shadow: 0px 0px 7px #28333D; border: solid 1px rgba(255, 255, 255, 0.25);}
.tip {margin: 2px; padding: 2px; text-decoration:none; font-family: Verdana; color: #000; float: left; font-size: 12px; background: #D8ECF1;}
a.tip:hover, .tip:hover {background: #85CDF1; cursor:pointer;}
div.info h6, .tipsy-inner h6 {font-size: 16px; font-weight:bold; text-transform: uppercase; text-align:left;}
div.info a, .tipsy-inner a { text decoration: underline; color: blue; display: inline; clear: none;}
div.info b, .tipsy-inner b { text decoration: underline; color: blue; display: inline; clear: none;}
.tipsy-inner p {text-align:left;}
div.info {visibility:hidden; width:0; height: 0;}
.imageBorder {float:left; border: 1px #fff solid; width: 70px; height: 70px; overflow: hidden;}
.imageBorder img {margin: -35px 0 0 -10px;}

JavaScript

$('.tip').each(function() {
//test if title is defined
    if($(this).attr("title")!=undefined)
    {
        //alert($(el).attr("title"));
        $(this).tipsy({fade: true, gravity: $.fn.tipsy.autoWE});
        
    }else{
        //alert("!!!! "+i);
        $(this).tipsy({
            html: true,
            fade: true,
            gravity: $.fn.tipsy.autoWE,
            title: function() {
               return $(this).children('.info').html();
               //return ("returning a string");
            }
        });
    }
  });