Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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/

share|improve this question
    
Why don't you show us what you have so far? Or did you mean you have no code at all? I understood that you don't have any working code. –  t f Mar 26 '13 at 11:08
    
I've updated the question with the code I used once. –  Frederick Andersen Mar 26 '13 at 11:11
    
You have any idea, @tf? –  Frederick Andersen Mar 26 '13 at 11:47
    
Well, I looked into the fiddle, but what I (or other people here) need, is some actual example bringing this into WordPress context. How/Where did you include qTip to display the content? What is not working? –  t f Mar 26 '13 at 11:55
    
Well, in the Fiddle, when you hover over the BMW-logo, the text Hello, I'm text! will appear. That text is taken from a WordPress post I made called BMW Sponsor with the content, Hello, I'm text!. The logos are all posts displayed in a top-bar with a featured image. The problem I have, is when I display text in WordPress' text-editor and I hit Enter to skip down a line or two, the text after the line break won't display in the tooltip. Why is that? –  Frederick Andersen Mar 26 '13 at 12:03
show 1 more comment

1 Answer

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/

share|improve this answer
    
I haven't had the chance to test it yet. Will this work with the_content();? The idea with this is it has to work through the WordPress Text Editor. –  Frederick Andersen Mar 31 '13 at 0:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.