Trick: Toggle Glossary Terms Popups

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.

Trick: Toggle Glossary Terms Popups

Postby MattyQ on Wed Apr 22, 2015 7:05 am

Hey, all,

I just wanted to share this little trick we're using in our help system for the popup version of the glossary terms. We really liked how they functioned (albeit we restyled ours fairly significantly), but found it not to be mobile friendly because they wouldn't open when tapped, since the function is hover-based. To work around that, I added a little CSS and Javascript to our projects to make the glossary popups toggle on and off.

Code: Select all
$( "a.glossaryTerm" ).click(function() {
    $( this ).toggleClass( "showPopup" );
    $( this ).children( "span.MCTextPopupBody" ).toggleClass( "showMe" );

Code: Select all
    display: block !important;
    opacity: 1 !important;

    background-image: url('../../../Skins/Default/Stylesheets/ExpandingOpen.gif') !important;
    padding-right: 17px !important;

You can add the script to each page where a glossary term occurs, or to a master page to use it across multiple topics. The CSS should go in whatever stylesheet the topic is using.

The image path provided in the showPopup class is to the default ExpandingOpen image. You should adjust this to whatever image you use to indicate the glossary popup is open. Additionally, a color property can be specified (e.g. "color: red;") in the showPopup class to give the glossary link a different color while it's open.

The basic result looks like the following:

And a result that's more fully styled:

Notably, you can then tap the popup or the link to close it.
You do not have the required permissions to view the files attached to this post.
Sr. Propeller Head
Posts: 136
Joined: Tue Sep 30, 2014 7:10 am
Location: Roanoke, VA

Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 2 guests