Display the Content of a Post with qTip2

by

How would/should I use qTip2 to display the the_content(); of a WordPress post?

I’ve been trying to accomplish this for a month now. I got it working once, but it wouldn’t display the content that was placed after a <br>. I no longer have the code, unfortunately.

I found the code, which worked before, but sadly, couldn’t handle line breaks, <br>:
http://jsfiddle.net/jv8WN/7/

1 Answer
1

Here’s a possible solution:

<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!<br />New line.</p>
                <p>But I have several lines, yay!</p>
            </span>
        </li>

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

As I’m using span instead of p, I had to adapt the CSS:

#sponsors .wrap .lcp_catlist li span {
    display: none;
}

JavaScript:

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

Basically, you just have to wrap the post content into span tags, that’s it.

The Fiddle: http://jsfiddle.net/jv8WN/33/

Leave a Comment