1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Tooltip popups

Discussion in 'Styling and Customization Questions' started by Drae, Jan 21, 2013.

  1. Drae

    Drae Active Member

    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:

    Code:
    <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"?
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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:

    Code:
    			<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>
     
    rafass, Drae and Jake Bunce like this.
  3. Drae

    Drae Active Member

    Thanks for that Chris!

    Ok, so I now have this:

    Code:
    <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: example1.png 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?
     
  4. Drae

    Drae Active Member

    Still looking for help with the issue above.
     
  5. cclaerhout

    cclaerhout Well-Known Member

Share This Page