Hide colorbox title text on hover, show as photo caption with full size image - colorbox

Question

I'm using colorbox on a site but haven't been able to figure out how turn off the title text when hovering over a thumbnail. I want to retain the text to use as a photo caption when you see the full size image, just hide it on the thumbnail hover state.
I've seen some js solutions to completely turn them off, which isn't what I want. I also messed around the with the colorbox js itself and was able to turn off the text for the full size image but that is the reverse of what I want. My skills are HTML and CSS... I have experimented with qtip but that is a little beyond me right now.
My HTML is basically this:
<li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li>
Any help would be appreciated--thanks!

Answer 1

Try using some (hidden) element other than the title attribute, then as a setting in your colorbox, set the title option to a displayed copy of that element, for example:
HTML:
<li class="imgTitle">
<a class="group1" href="images/bigPhoto.png">
<span class="caption" style="display: none;">
I'm a caption that's not in a title attribute anymore
</span>
<img src="images/thumbnailPhoto.png" />
</a>
</li>
JS could be something like this:
$(".group1").colorbox({
title: function() {
return $(this).find("span.caption").clone().show();
},
// other settings/options here
});
Here is a fiddle similar to the above. I added the .clone() part because, when I was implementing something similar in a gallery, they disappeared after clicking once through all the images.