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.
Javascript:
Code: Select all
$( "a.glossaryTerm" ).click(function() {
$( this ).toggleClass( "showPopup" );
$( this ).children( "span.MCTextPopupBody" ).toggleClass( "showMe" );
});
Code: Select all
span[class*=MCTextPopupBody][class*=showMe]
{
display: block !important;
opacity: 1 !important;
}
a[class*=glossaryTerm][class*=showPopup]
{
background-image: url('../../../Skins/Default/Stylesheets/ExpandingOpen.gif') !important;
padding-right: 17px !important;
}
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.