CM Tooltip (CMTG) - Getting Started - Use Case - Creating a Glossary Website With Tooltips From Scratch
Use Case - Creating a Glossary Website With Tooltips From Scratch
CM Tooltip Glossary allows you to create a site with a complete glossary of terms. Each term's definition can appear on mouse hover across the whole site.
Use Case Front-End
Use Case Assumptions
In this example use case guide, we'll cover how to create a small glossary about internet terms. You can apply the same idea to the topic of your site.
We consider that you have already bought the plugin, but not installed it.
- Installing the plugin
- Adding the first term
- Configuring glossary index
- Improving tooltip's visual
- Translating the interface
Installing The Plugin
The process is the same for all CM plugins.
- Download the plugin from your customer dashboard
- Log in to WordPress and navigate to the WordPress Admin → Plugins settings
- Click on Add New
- Activate it and add the license
Learn more: Getting Started - Installation And First Steps
TIP: Refresh the Permalinks StructureThis will help to prevent common 404 errors. Take these simple steps:
- Log in to your WordPress website as the admin.
- Visit Admin Dashboard → Settings → Permalinks.
- Click on Save Changes.
Adding First Term
With the plugin ready to go, it's time to add the first term! Head to CM Tooltip Glossary → Add new.
The term title is the word or phrase which, when found on the post/page, would display the tooltip with the definition, and link to the Term Page or any other custom links according to the settings that you define.
Term descriptions is the actual content.
Adding a Term ExampleHere we show the term Hypertext Transfer Protocol.
Aside from the content, this term has a category (Web), related articles and an abbreviation (HTTP).
Using the same process, we can add as many terms as we would like.
Improving Terms and Term Pages
Adding a term is only the beginning! There are many features to improve both terms and term pages.
- Learn how to access and edit the Glossary Term page.
- Enrich the Term page by linking Related terms and Related articles.
- Display persistent content before and after every term.
- Assign an icon to each of your terms.
- Use abbreviations (United States, US, USA), synonyms (program, software) and variations (child, children).
- You can also enable multiple meanings to the same term (eCommerce).
- Add a link back to the Glossary Index (Pro, Pro+, eCommerce).
- Get social by enabling users to embed and share your term. Also turn on the social share buttons (Pro, Pro+, eCommerce).
Learn more: Getting Started - Adding a Term
Configuring The Glossary Index
The Glossary Index Page is automatically created upon plugin installation in the address www.yoursite.com/glossary. As you add more terms, the Glossary Index Page will be automatically updated to present all of your glossary items.
It's a normal page with the shortcode
[glossary], which outputs your terms in alphabetical order. You can configure how it looks by default by heading to the plugin's settings → Glossary Index Page tab.
ExampleFor this demo, we:
- Set template to Cubes
- Enable the search with Fast-live-Filter
- Show the alphabetical index and added the character ø to the end
- Removed the tooltips on this specific page
TIP 1: Modifying The Index Content With Shortcodes
You can change what appears in the glossary by adding parameters to its shortcode,
There are many parameters. A small sample: of parameters
- cat - the name of the category you want to show the list for.
- title_show - controls whether to show the heading – setting this to 0 means the heading won’t be displayed at all (default: 1 – show heading).
- no_desc (Pro+/Ecommerce) - you can use this attribute (add no_desc=”1″) to disable the descriptions on Glossary Index List.
- glossary_index_style Pro+/Ecommerce) - Accepts the following values:
- Classic "classic", Classic + definition "classic-definition", Classic + excerpt "classic-excerpt", Small Tiles "small-tiles", Big Tiles "big-tiles", Classic table "classic-table", Modern table "modern-table", Sidebar + term page "sidebar-termpage"
[glossary cat="web" title_show="0" no_desc="1]
Check all shortcodes and parameters: CCM Tooltip (CMTG) - Shortcodes - Available Shortcodes - CreativeMinds Products Documentation.
TIP 2: Modifying The Index Visual With Templates
Check some of the 17 templates:
Learn more: CM Tooltip (CMTG) - Index - Index Templates
Improving The Tooltip's Visual
Now let's match the tooltip to our site's identity. Here are some examples of what we can achieve:
Head to Admin Dashboard → CM Tooltip → Settings → Tooltip tab. Then, check the Tooltip - Styling section.
Some of what you can change:
- Tooltip font
- Tooltip title font size
- Tooltip close icon
- Tooltip background color
- Tooltip border line properties
- Tooltip text color
- Tooltip positioning on the screen
What Else Can I do?
Check some useful tips:
- Dynamically Integrate with other services, such as Wikipedia, WooCommerce, and dictionaries (Merriam Webster, Glosbe Dictionary, Google Translate).
- Spice your tooltips up with image, video and audio content - check the video tutorial!
Learn more: Shortcodes - Using Shortcodes
This example follows the following settings:
- Stem enabled / white
- Background color: #1e73be
- Tooltip title 13px / white
- Tooltip font 13px
- Padding 2px 12px 3px 7px
- Tooltip shadow enabled / black
- Animation: Grow 0.5s / Fade-out 0.5s
If your site is not in English, that's ok. The CM Tooltip Glossary fully supports all UTF-8 languages. Translate it by adapting labels, and making a few tweaks. Pro+ and eCommerce also have RLT support and are even compatible with WPML (WordPress MultiLanguage).
Some examples of labels available for translation:
- Back to Top
- « Back to Glossary Index
- Read More
- Glossary Item
Learn more: Settings - Labels
Following instructions found in the plugin and guides, you should be able to complete a glossary of the theme of your choice.