Chris Roberts

<p>This plugin allows users to create custom popups or tooltips in their posts. The style and behavior of the tooltip are highly configurable through CSS and through the WordPress dashboard.</p>
<h3>Shortcode Attributes</h3>
<p>The following options can all be included as attributes in your shortcode. Default values, when applicable, are shown in parenthesis. Multiple possible values are listed in parenthesis with the default first.</p>
<p>Note that even though some of the attributes have changed from older versions, the old attributes should continue to work. You will not need to update shortcodes that use the old names.</p>
<ul>
<li>autoshow (false/true): If true, the tooltip or tooltips will automatically show when the page loads.</li>
<li>showtitle (false/true): Whether or not to use the title attribute in links. Good for accessibility, bad for visibility.</li>
<li>hoverpopup (true/false): If true, tooltip displays when hovering over the link. If false, tooltip displays when the link is clicked.</li>
<li>showdelay (100): Adds a slight delay before displaying the tooltip to prevent popping up tooltips when the mouse moves across the page.</li>
<li>showspeed (200): How long it takes in ms for the tooltip to fade in.</li>
<li>hidespeed (200): How long it takes in ms for the tooltip to fade out.</li>
<li>autoclose (true/false): Whether or not the tooltip should automatically close after a delay.</li>
<li>hidedelay (1000): How long it takes in ms before the tooltip begins to auto fade out.</li>
<li>container: By default, the tooltip is placed in the DOM right where you set it but if you want to use Tippy for specific positioning, you can change its parent element by specifying a CSS selector here.</li>
<li>position (link/mouse/css position value): Specifies where the tooltip should be positioned. If set to link or mouse, the x and y values are automatically determined.</li>
<li>top: Useful when position set to fixed, absolute, or relative.</li>
<li>bottom: Useful when position set to fixed, absolute, or relative.</li>
<li>left: Useful when position set to fixed, absolute, or relative.</li>
<li>right: Useful when position set to fixed, absolute, or relative.</li>
<li>offsetx (10): Set a default horizontal offset for the tooltip position. Useful when position set to link or mouse.</li>
<li>offsety (10): Set a default vertical offset for the tooltip position. Useful when position set to link or mouse.</li>
<li>width: Specify a width for the tooltip. The default is set in jquery.tippy.css.</li>
<li>height: Specify a height for the tooltip. The default is set in jquery.tippy.css.</li>
<li>draggable (false/true): Allow visitors to drag the tooltip around. Useful when autoclose is false. Requires jQuery UI.</li>
<li>dragheader (true/false): If draging is enabled and this is set to true, tooltip will only be draggable from the header bar. If false, visitors can drag from any part of the tooltip.</li>
<li>anchor: Optional CSS selector specifying the link element that will trigger Tippy.</li>
<li>title: Sets the text shown on the link and in the header.</li>
<li>swaptitle: Alternate title to use when the visitor hovers over the link.</li>
<li>img: Tippy can be used with images rather than text; set img to the url of an image to display Tippy on an image.</li>
<li>swapimg: Like swaptitle, swapimg switches to an alternate image when a visitor hovers over the link.</li>
<li>href: If href is set, the Tippy link will point to this url.</li>
<li>target: Specifies the link target for the Tippy link.</li>
<li>showheader (true/false): Whether or not the tooltip should show a header.</li>
<li>headertitle: By default, the header is set to the tooltip title. With headertitle, you can set specific text for the title.</li>
<li>headerhref: If headerhref is set, the tooltip header text will be a link pointing to this url.</li>
<li>showclose (true/false): Whether or not the tooltip have a close link. Usefor for mobile devices or when autoclose is false.</li>
<li>closetext (‘close’): The text to display for the close link.</li>
<li>calcpos (‘parent/document’): Calculate the tooltip link position relative to its parent or to the whole document.</li>
<li>alttrigger: Specify an element to use as additional triggers for the tooltip. Be sure to include . or # – ie: .triggerClass or #triggerId.</li>
</ul>


Tippy

Allows users to turn text into a tooltip or popup using a special [tippy] tag.

Daniele Scasciafratte

codeat

Eugenio Petulla'

<p>Adding a glossary to your website can be a smart move to improve your users’ reading experience and significantly improve SEO and rankings.<br />
If you’re looking for the ultimate glossary plugin for your WordPress site, look no further: you’ve found it!</p>
<p>Glossary by Codeat is the freemium WordPress plugin that allows you to create a glossary for your website and turn your content into a complete and navigable resource. It comes with a free and a PRO version.</p>
<h3>What is the superpower of Glossary by Codeat?</h3>
<p>Glossary by Codeat automatically generates word lists from your content and creates styled tooltips, enhancing user engagement without manual effort.<br />
The terms and definitions will be grouped in a glossary or dictionary section and automatically linked to the corresponding words within your posts and pages.</p>
<p>You can use Glossary by Codeat with the classic WordPress editor or with Gutenberg: it’s 100% compatible.</p>
<h3>Real-World Applications</h3>
<p>Let’s say you have a food blog.<br />
How great would it be to show your readers a tooltip (and a direct link) to the description of an ingredient (or kitchen utensil) without them having to leave your website?</p>
<p>And what if you run an online store selling fishing gear?<br />
With the Glossary plugin, you can provide detailed descriptions of your merchandise and suggest related products directly from your store’s pages.</p>
<p>Are you a big fan of Back to the Future and want to create a digital encyclopedia that covers all aspects of your favorite saga?</p>
<p>With Glossary by Codeat, it’s a piece of cake! <a href="https://demo.codeat.co/glossary/" rel="nofollow ugc">See this demo</a>.</p>
<h3>Are you an affiliate marketing specialist?</h3>
<p>You can use Glossary by Codeat to include your affiliation URLs and descriptions to some of your key terms. This way, you can turn the tooltip area of the pop-up into a revenue machine! Cool, uh?</p>
<p>And what’s even cooler is that you can use Glossary by Codeat for free!<br />
<strong>The basic version of Glossary is – and will always be – free.</strong></p>
<h3>FREE FEATURES</h3>
<p>The free version of Glossary by Codeat is jam-packed with nifty features! Its powerful engine automatically links every instance of a term (or set of terms) to a predefined list of definitions.</p>
<p>Here are some of the things you can do with the free version of Glossary by Codeat:</p>
<ul>
<li>Group your terms by category and create vertical archives of terms through the shortcodes: Lists of Terms and Lists of Categories.</li>
<li>Choose where to activate its features: in all pages or only some of them, in archives, taxonomies, custom post types, etc.</li>
<li>Apply a highlight to your linked terms or a highlight and a tooltip on hover.</li>
<li>Style your tooltips by choosing one of the four free templates.</li>
<li>Link terms to internal or external locations.</li>
<li>Related/additional terms or synonyms are supported for the same term.</li>
<li>Add a dedicated icon to highlight external links.</li>
<li>Use it with your favorite plugins: Yoast SEO, Ninja Forms, Elementor, Bricks Builder, Fixed TOC, Easy Table of Contents, YARPP, role management plugins like User Role Editor, or multi-language plugins such as WPML and Polylang.</li>
<li>Custom integration for themes: Bricks, Divi and Genesis.</li>
<li>Smooth migration from the CM Glossary Tooltip plugin.</li>
<li>Play with the widgets: Glossary Search Bar, Latest Terms, and Glossary Categories.</li>
<li>Hassle-free integration with Gutenberg blocks.</li>
<li>ChatGPT integration (requires an OpenAI API Key) for term content generation</li>
<li>CSV term imports</li>
<li>Schema.org support for DefinedTerm</li>
</ul>
<p>The free version of Glossary by Codeat doesn’t include dedicated support.<br />
If you need help, take a look at our <a href="https://demo.codeat.co/glossary/" rel="nofollow ugc">demo site</a>, read our <a href="https://docs.codeat.co/glossary/" rel="nofollow ugc">documentation</a>, or <a href="https://wordpress.org/support/plugin/glossary-by-codeat" rel="ugc">head over to the dedicated WordPress support forum</a>.</p>
<p>The PRO version tops all the fantastic features of Codeat Glossary Free with a set of useful extras that extend styling and customization opportunities. Let’s see them all in detail:</p>
<h3>🚀 PRO FEATURES</h3>
<p>The <a href="https://glossary.codeat.co/" rel="nofollow ugc">PRO version of Glossary by Codeat</a> includes all the free features plus several behavior-controlling tools to enhance your reader’s experience.</p>
<p>Here are some of the things you can do with the PRO version of Glossary by Codeat:</p>
<ul>
<li>Advanced customization and styling of your tooltips.</li>
<li>Automatically generates glossary terms footnotes for your content. <a href="https://demo.codeat.co/glossary/wiki/back-to-the-future/" rel="nofollow ugc">Demo</a></li>
<li>Full control of your tooltips behavior on mobile.</li>
<li>Match case-sensitive terms.</li>
<li>Link only the first occurrence of the same/any key key term.</li>
<li>Prevent term links from appearing on their own description page.</li>
<li>Add an alphabetically ordered list of your Glossary terms. <a href="https://demo.codeat.co/glossary/" rel="nofollow ugc">Demo</a></li>
<li>Fully customizable glossary index block for visual editors (Gutenberg, Elementor, Fusion Bulder, Divi, Beaver Builder, SiteOrigin)</li>
<li>Add Custom Fields to your key terms, and use the integration with the ACF Custom Fields plugin.</li>
<li>Use the PRO shortcode/block to create a Glossary Index.</li>
<li>Advanced shortcodes to parse the content when using Visual Composer or Page Builder.</li>
</ul>
<p><strong>The PRO version of Glossary by Codeat includes dedicated <a href="https://support.codeat.co/" rel="nofollow ugc">support</a>.</strong><br />
If you have any doubts or questions, our friendly support team will assist you as quickly as possible.<br />
<a href="https://docs.codeat.co/glossary/premium-features/" rel="nofollow ugc">Our documentation covers the premium features with screenshots</a>.</p>
<p>Not happy with the plugin?<br />
Take advantage of our <strong>14 days money-back guarantee</strong>!</p>


Glossary

Fast support even for the free version <3

Great plugin and great support!

Boost your SEO & UX with Codeat's Glossary: powerful auto-link engine; customizable tooltips, mobile settings, ChatGPT and much more!

Tippy vs Glossary