Hover text in XF-like CSS Blockquotes

[Moses]

I'm attempting to put some descriptive alternate text for images on my new theme and thought it would look pretty cool to have them come out like the forum description hover that XF uses on forumhome.

My plan was to have a team logo showing on this page and when someone mouses over the div containing the image it'll show those cool XF style hover blocks saying "Proudly supporting the Wallabies" or somesuch.

Problem is, it's quite complicated and I'm struggling!
Any help would be appreciated

 

[Floris]

Try: class="NoOverlay Tooltip" title="My text here" in the <img /> ? (if it's a link, probably need to apply to <a>

 

[Moses]

Thanks for the quick response Floris, I tried changing my code to:

<div class="profimg {$message.customFields.international_rugby_team}">
<div class="NoOverlay Tooltip" title="Proudly supporting the {$message.customFields.international_rugby_team}"></div>
</div>

But no such luck

 

[Robbo]

Try removing NoOverlay

 

[Moses]

Cheers Robbo, I still see nothing when hovering over the div... in fact when looking in Firebug the title tag is stripped too?

<div class="profimg {$message.customFields.international_rugby_team}">
<div class="Tooltip" title="Proudly supporting the {$message.customFields.international_rugby_team}"></div>
</div>

 

[Robbo]

It being stripped means it is being initialized properly. Are you sure you are hovering over the div? Give it "test" as the inner HTML and hover it and see what happens.

 

[Moses]

That's really cool, thanks for the help Robbo and Floris

 

[Moses]

One more quick one (hopefully), how do I output the Text from user profile fields rather than the value?

{$message.customFields.international_rugby_team}

 

[Robbo]

I don't know what the key is. Do {xen:helper dump, $message.customFields.internation_rugby_team} to find out. I think there might actually be something else like $customFieldData... I can't remember right now...