Tooltip popups

[Drae]

I'm trying to change a few things on the XF default templates in my skins to become tooltip popups instead when hovered over. I've found classes such as StatusTooltip, but my attempts so far to merely use "Tooltip" has had limited success

At present, I'm trying to change this bit of the sidebar_visitor_panel:

<xen:hook name="sidebar_visitor_panel_stats">
                <dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
                <dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
            </div>
            </xen:hook>

So that the number of messages, trophy points and likes pop up on hovering over their phrase.

Do I have to make new tooltip classes such as, "LikesTooltip"?

 

[Chris D]

Any class that beings with a capital letter is basically a jQuery selector (that's the naming convention XF devs went for). So you don't ever need to add your own classes. They can be used as CSS selectors, of course, but generally they are defined and used in the js files. Sometimes I like to check out js/xenforo/full/xenforo.js and others by searching for the class name so I can work out what it does and what the options are, but in this case it's quite simple at first glance.

You would need to add the "Tooltip" class to all of your dl elements there. In addition to that, you should add a title attribute. It's what's in the title attribute that should get rendered in the tool tip.

So something like this should work. I have added the required changes to the message count one:

			<xen:hook name="sidebar_visitor_panel_stats">
				<dl class="pairsJustified Tooltip" title="{xen:phrase messages}: {xen:number $visitor.message_count}"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
				<dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
				<dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
			</div>
			</xen:hook>

 

[Drae]

Any class that beings with a capital letter is basically a jQuery selector (that's the naming convention XF devs went for). So you don't ever need to add your own classes. They can be used as CSS selectors, of course, but generally they are defined and used in the js files. Sometimes I like to check out js/xenforo/full/xenforo.js and others by searching for the class name so I can work out what it does and what the options are, but in this case it's quite simple at first glance.

You would need to add the "Tooltip" class to all of your dl elements there. In addition to that, you should add a title attribute. It's what's in the title attribute that should get rendered in the tool tip.

So something like this should work. I have added the required changes to the message count one:

 <xen:hook name="sidebar_visitor_panel_stats">
<dl class="pairsJustified Tooltip" title="{xen:phrase messages}: {xen:number $visitor.message_count}"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
<dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
<dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>
</div>
</xen:hook>

Thanks for that Chris!

Ok, so I now have this:

<dl class="pairsJustified Tooltip" title="{xen:number $visitor.message_count}"><dt>ICP </dt>
                <dl class="pairsJustified Tooltip" title="{xen:number $visitor.like_count}"><dt>{xen:phrase likes} </dt>
                <dl class="pairsJustified Tooltip" title="{xen:number $visitor.trophy_points}"><dt>{xen:phrase points}:</dt></dl>

Which creates this: when I hover over the last one. I've tried spacing them out by styling and by simply putting text spaces between them to no effect (the ICP, Likes and Points), and was also wondering how to make the tooltip close the ones before the next in the line, whilst keeping them all upon one line?

 

[Drae]

Still looking for help with the issue above.

 

[cclaerhout]

You might read this:
http://jquerytools.org/demos/tooltip/index.html
And all the tooltip section too.