html tooltip over images

Progress reports and musings from the developers on the current gaming tools.

Moderators: Azhrei, dorpond, trevor

Post Reply
nirkedar
Cave Troll
Posts: 52
Joined: Tue Sep 21, 2010 3:13 pm

html tooltip over images

Post by nirkedar »

How do I place a tooltip over an image.
For example, say I wanted the token name to show when I hover over the token image in the Chat window. How would the code for it look like?

TIA.

User avatar
Full Bleed
Demigod
Posts: 4444
Joined: Sun Feb 25, 2007 11:53 am
Location: MD
Contact:

Re: html tooltip over images

Post by Full Bleed »

nirkedar wrote:How do I place a tooltip over an image.
For example, say I wanted the token name to show when I hover over the token image in the Chat window. How would the code for it look like?

TIA.


You should be able to wrap the image in <span title="tool tip text"></span>.

If you're using broadcast, you'll have to convert the double quotes to single quotes.
Maptool is the Millennium Falcon of VTT's -- "She may not look like much, but she's got it where it counts."

nirkedar
Cave Troll
Posts: 52
Joined: Tue Sep 21, 2010 3:13 pm

Re: html tooltip over images

Post by nirkedar »

The image shows (no prob), but the tooltip is still not showing.
What am I doing wrong?

CODE
[H: TokenID = ARG(0)]
[H: TokenName = getName(TokenID)]
[H: switchToken(TokenID)]
[H: ImageFile = strformat('<img border=0 src="%s" />', getTokenImage(60))]

<td style="padding:2px 2px; " align="center" width="100%"><span title='[R: TokenName]'>[R: ImageFile]</span></td>

User avatar
aliasmask
Deity
Posts: 8579
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: html tooltip over images

Post by aliasmask »

Just going by memory, but for image tooltips, you may have to use the "alt" entity of the <img> tag rather than using <span> which is good for text. I just check some old code and yeah, that's what I did.

Code: Select all

      [H: output = strformat('
         <table cellpadding="0">
            <tr>
               <td width="40" style="padding-right: 5px" valign="top"><img src="%{tokenImage}-40" alt="%{playerName}" /></td>
               <td style="margin-right: 5px; font-weight:700; " valign="top">%{tokenName}:</td>
               <td valign="top"><span>%{chatText}</span></td>
            </tr>
         </table>'
)]
 

nirkedar
Cave Troll
Posts: 52
Joined: Tue Sep 21, 2010 3:13 pm

Re: html tooltip over images

Post by nirkedar »

That did it for me.
Thanks a mil. 8)

Post Reply

Return to “Developer Notes”