I've created a minimized sponsor section with small (50x50 sized) thumbnails through the List Category Posts WordPress plug-in on my site (can be seen here). This plug-in simply displays posts from certain categories anywhere on your website.
I now want to add a tooltip on hovering the image, which would essentially display the posts the_content();. For the tooltip I'd be using qTip2, since this seems to be the best tooltip solution.
My problem occour, when nothing happens on hovering. Can you spot the error? I've been battling this problem for 3 straight days now.
When looking at the HTML, think as if, you couldn't modify it. The code can be found on JSFIDDLE (I hope the code is valid, but I'm not sure, since this is the first time I'm using JSFIDDLE).
The problem that you are having is your selector for the content of the Qtip. You have $(this).next('div:hidden'), but it appears that your text is actually in a <p> tag.
EDIT: Just saw the part about not editing the HTML, you'll just have to revise your selector to choose the next <p> tag. Something like this $(this).parent().next('p')[0].textContent, fiddle
EDIT 2: Ideally, I would edit the HTML and do this:
Looking through the Qtip2 documentation, the author offers the solution of putting your desired text content into an attribute of the target element. Here is a fiddle demonstrating this.
The relevant HTML:
<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" qtip-content="Hello, I'm text!"/></a>
The qTip code:
$('.lcp_catlist a img').each(function () {
$(this).qtip({
content: $(this).next('div:hidden')
});
});