I have a table of images, which link to their content, and because some of the content titles vary in length, it's difficult to align each image neatly if the titles are displayed above them, as long titles push their image to the side. So rather than restrict title length, I'd like to remove the titles, and have them display inside a tooltip when hovering over each image in the table/gallery. Similar to imgur.com, which even shows the number of views for each node. I wouldn't mind showing creation dates too, if possible. But I'll be happy if I can just get the titles to show.
I've installed Tipsy and Views Tooltips, which for the most part seem great, but they aren't quite behaving as I'd like.
Views Tooltip provides the correct content title in the html, but it's div is outside of the Selector used to trigger Tipsy, so Tipsy isn't picking up the correct tip content. It just shows, 'null'.
The html looks something like(inspecting in chrome):
<table>
<tbody>
<tr>
<td>
<div class="field-content">
<a href="...." original-title=""><img...></a>
</div>
<div class="views-tooltip" tooltip-content="Content title"></div>
</td>
<td>
and the list goes on..
So if I set the Tipsy selector to, '.field-content a', it triggers on hover over the images, but doesn't have anything to return. And if I set it to, '.views-tooltip' and 'tooltip content', the tooltip won't trigger when hovering over the images.
So the way I see it, is that I need to somehow set the 'a' selector's original-title to the same as tooltip-content. Does anyone know how I might go about doing that, or perhaps have another solution? Any help would be appreciated, as I've been stuck on this for almost 3 days now.
Cheers,
Matt
