qTip2

Help on StackOverflow

HTML

<link rel="stylesheet" href="http://qtip2.com/v/nightly/jquery.qtip.css">
<script src="http://qtip2.com/v/nightly/jquery.qtip.js"></script>
<div id="sponsors">
    <div class="wrap">
        	<h1><span>Our Corporate Sponsors</span></h1>

        <ul class="lcp_catlist">
            <li>
                 <h5 class="header-sponsor-title"><a href="http://dacc.fredrixdesign.com/global-imports-bmw-2/" title="Global Imports BMW">Global Imports BMW</a></h5><a href="http://dacc.fredrixdesign.com/global-imports-bmw-2/"><img width="50" height="50" src="http://dacc.fredrixdesign.com/wp-content/uploads/bmw-150x150.jpg" class="attachment-50x50 wp-post-image" alt="DACC Sponsor" /></a>

                <span>Hello, I'm text!</span>
            </li>
            <li>
                 <h5 class="header-sponsor-title"><a href="http://dacc.fredrixdesign.com/caroline-e-taylor-llc-2/" title="Caroline E. Taylor, LLC">Caroline E. Taylor, LLC</a></h5><a href="http://dacc.fredrixdesign.com/caroline-e-taylor-llc-2/"><img width="50" height="50" src="http://dacc.fredrixdesign.com/wp-content/uploads/caroline-e-taylor-150x150.jpg" class="attachment-50x50 wp-post-image" alt="DACC Sponsor" /></a>

                <span>
                    <p>Me too!</p>
                    <p>But I have several lines, yay!</p>
                </span>
            </li>

        </ul>
    </div>
</div>

CSS

#sponsors {
    background-color: #e5e5e5;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#sponsors .wrap {
    background-color: #e5e5e5;
    width: 960px;
    height: auto !important;
    overflow: hidden;
    padding: 19px 15px 15px 0px;
}
#sponsors .wrap span {
    display: block;
    font-size: 12pt;
    color: #554e4a;
}
#sponsors .wrap h1 {
    margin-right: 25px;
    float: left;
    padding-top: 12px;
}
#sponsors .wrap .lcp_catlist {
    float: left;
}
#sponsors .wrap .lcp_catlist li {
    margin-right: 10px;
}
#sponsors .wrap .lcp_catlist li span {
    display: none;
}
#sponsors .wrap .lcp_catlist li img {
    position: relative;
    filter: url(filters.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#sponsors .wrap .lcp_catlist li img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#sponsors .wrap .lcp_catlist .header-sponsor-title {
    display: none;
}
ul {
    list-style: none;
}
li {
    display: inline;
}

JavaScript

$(document).ready(function () {
                $('.lcp_catlist a img').each(function () {
                    $(this).qtip({
                        content: $(this).parent().next('span')[0].innerHTML
                    });
                });
            });