Categories

Text Hover

Author: Scott Reilly
Version: 3.9.1
First released: 2009-07-15
Last update: 2020-01-13
Compatibility: WP 4.7 – 5.3.3
Download: [ zip ]
Description:

Add hover text to regular text in posts. Handy for providing explanations of names, terms,…

Extended Description

This plugin allows you to easily define help text that appears when a visitor hovers their mouse over a word or phrase in a post or page.

Via the plugin’s settings, simply specify the words or phrases that you want to be associated with hover text, and of course, the desired hover texts themselves. The format is quite simple; an example of which is shown here:

WP => WordPress
Matt => Matt Mullenweg
The Scooby Shack => the bar where the gang hangs out

Additional features of the plugin controlled both via settings and filters:

  • Hover text can be enabled for comments (it isn’t by default)
  • Hover text can be made case insensitive (it is case sensitive by default)
  • Hover text can be limited to doing only one replacement per term, per post (by default, all occurrences of a term are given hovertext)
  • Hover text can be rendered using the default browser tooltip (by default, the better-looking qTip2 library is used)

Note: This is not the same as my Text Replace plugin, which defines terms or phrases that you want replaced by replacement text when displayed on your site. Text Hover instead adds the hover text as additional information for when visitors hover over the term, which is otherwise displayed in the post as you typed it.

Links: Plugin Homepage | Plugin Directory Page | GitHub | Author Homepage

Hooks

The plugin exposes a number of filters for hooking. Typically, the code to utilize these hooks would go inside your active theme’s functions.php file. Bear in mind that all of the features controlled by these filters are configurable via the plugin’s settings page. These filters are likely only of interest to advanced users able to code.

c2c_text_hover_filters (filter)

The ‘c2c_text_hover_filters’ hook allows you to customize what hooks get text hover applied to them.

Arguments:

  • $hooks (array): Array of hooks that will be text hovered.

Example:

/**
 * Enable text hover for post/page titles.
 *
 * @param array $filters Filters handled by the Text Hover plugin.
 * @return array
 */
function more_text_hovers( $filters ) {
    $filters[] = 'the_title'; // Here you could put in the name of any filter you want
    return $filters;
}
add_filter( 'c2c_text_hover_filters', 'more_text_hovers' );

c2c_text_hover_third_party_filters (filter)

The ‘c2c_text_hover_third_party_filters’ hook allows you to customize what third-party hooks get text hover applied to them. Note: the results of this filter are then passed through the c2c_text_hover_filters filter, so third-party filters can be modified using either hook.

Arguments:

  • $filters (array): The third-party filters whose text should have text hover applied. Default array( 'acf/format_value/type=text', 'acf/format_value/type=textarea', 'acf/format_value/type=url', 'acf_the_content', 'elementor/frontend/the_content', 'elementor/widget/render_content' ).

Example:

/**
 * Stop text hovers for ACF text fields and add text hovers for a custom filter.
 *
 * @param array $filters
 * @return array
 */
function my_c2c_text_hover_third_party_filters( $filters ) {
    // Remove a filter already in the list.
    unset( $filters[ 'acf/format_value/type=text' ] );
    // Add a filter to the list.
    $filters[] = 'my_plugin_filter';
    return $filters;
}
add_filter( 'c2c_text_hover_third_party_filters', 'my_c2c_text_hover_third_party_filters' );

c2c_text_hover (filter)

The ‘c2c_text_hover’ hook allows you to customize or override the setting defining all of the text hover terms and their hover texts.

Arguments:

  • $text_hover_array (array): Array of text hover terms and their hover texts. This will be the value set via the plugin’s settings page.

Example:

/**
 * Add dynamic text hover.
 *
 * @param array $text_hover_array Array of all text hover terms and their hover texts.
 * @return array
 */
function my_text_hovers( $text_hover_array ) {
    // Add new term and hover text
    $text_hover_array['Matt'] => 'Matt Mullenweg';
    // Unset a term that we never want hover texted
    if ( isset( $text_hover_array['Drupal'] ) )
        unset( $text_hover_array['Drupal'] );
    // Important!
    return $text_hover_array;
}
add_filter( 'c2c_text_hover', 'my_text_hovers' );

c2c_text_hover_text_comments (filter)

The ‘c2c_text_hover_text_comments’ hook allows you to customize or override the setting indicating if text linkification should be enabled in comments.

Arguments:

  • $state (bool): Either true or false indicating if text linkification is enabled for comments. The default value will be the value set via the plugin’s settings page.

Example:

// Prevent text linkification from ever being enabled in comments.
add_filter( 'c2c_linkify_text_comments', '__return_false' );

c2c_text_hover_case_sensitive (filter)

The ‘c2c_text_hover_case_sensitive’ hook allows you to customize or override the setting indicating if text hover should be case sensitive.

Arguments:

  • $state (bool): Either true or false indicating if text hover is case sensitive. This will be the value set via the plugin’s settings page.

Example:

// Prevent text hover from ever being case sensitive.
add_filter( 'c2c_text_hover_case_sensitive', '__return_false' );

c2c_text_hover_once (filter)

The ‘c2c_text_hover_once’ hook allows you to customize or override the setting indicating if text hovering should be limited to once per term per piece of text being processed regardless of how many times the term appears.

Arguments:

  • $state (bool): Either true or false indicating if text hovering is to only occur once per term. The default value will be the value set via the plugin’s settings page.

Example:

// Only show hovertext for a term/shortcut once per post.
add_filter( 'c2c_text_hover_once', '__return_true' );

c2c_text_hover_use_pretty_tooltips (filter)

The ‘c2c_text_hover_use_pretty_tooltips’ hook allows you to customize or override the setting indicating if text hovering should use prettier tooltips to display the hover text. If false, the browser’s default tooltips will be used.

Arguments:

  • $state (bool): Either true or false indicating if prettier tooltips should be used. The default value will be the value set via the plugin’s settings page.

Example:

// Prevent pretty tooltips from being used.
add_filter( 'c2c_text_hover_use_pretty_tooltips', '__return_false' );

Find out more at the plugin’s WordPress Plugin Repository page.

Screenshots

Click to see full-size image.

  1. A screenshot of the admin options page for the plugin, where you define the terms/acronyms/phrases and their related hover text

    A screenshot of the admin options page for the plugin, where you define the terms/acronyms/phrases and their related hover text

  2. A screenshot of the plugin in action for a post when the mouse is hovering over a defined hover text term using the pretty tooltips

    A screenshot of the plugin in action for a post when the mouse is hovering over a defined hover text term using the pretty tooltips

  3. A screenshot of the plugin in action for a post when the mouse is hovering over a defined hover text term using default browser tooltips (in this case, Chrome on OSX)

    A screenshot of the plugin in action for a post when the mouse is hovering over a defined hover text term using default browser tooltips (in this case, Chrome on OSX)

Installation

  1. Whether installing or updating, whether this plugin or any other, it is always advisable to back-up your data before starting
  2. Install via the built-in WordPress plugin installer. Or download and unzip text-hover.zip inside the plugins directory for your site (typically wp-content/plugins/)
  3. Activate the plugin through the ‘Plugins’ admin menu in WordPress
  4. Go to the Settings -> Text Hover admin settings page and customize the settings (namely to define the terms/abbreviations and their explanations).
  5. Use the terms/abbreviations in posts and/or pages (terms/abbreviations appearing in existing posts will also be affected by this plugin)

Frequently Asked Questions

Q. In my posts, hover text terms do not appear any differently than regular text (though I can hover over them and see the hover text)! What gives?
A. The plugin currently makes use of the standard HTML tag abbr to specify the terms and their hover text. Browsers have default handling and display of abbr. It’s possibly that the CSS for your theme is overriding the default display. I use the following in my site’s styles.css file to ensure it displays for me in the manner I prefer (which, by the same token, you can use more CSS formatting to further format the hover terms) :

abbr {
    text-decoration: underline dotted #000;
}

Q. Does this plugin modify the post content in the database?
A. No. The plugin filters post content on-the-fly.

Q. Will this work for posts I wrote prior to installing this plugin?
A. Yes, if they include strings that you’ve now defined as terms.

Q. What post fields get handled by this plugin?
A. By default, the plugin filters the post content, post excerpt fields, widget text, and optionally comments and comment excerpts. You can use the ‘c2c_text_hover_filters’ filter to modify that behavior (see Hooks section).

Q. How can I get text hover to apply for post titles (or something not processed for text hover by default)?
A. You can add to the list of filters that get processed for text hover terms. See the Hooks section for an example.

Q. Is the plugin case sensitive?
A. By default, yes. There is a setting you can change to make it case insensitive. Or you can use the ‘c2c_text_hover_case_sensitive’ filter (see Hooks section). Note that the option applies to all terms/abbreviations. If you want to selectively have terms/acronyms be case insensitive, you should leave the case sensitive setting checked and add a listing for each case variation you wish to support.

Q. Will all instances of a given term be hovered in a single post?
A. By default, yes. There is a setting you can change so that only the first occurrence of the term in the post gets hovered. Or if you are a coder, you can use the ‘c2c_text_hover_replace_once’ filter (see Hooks section).

Q. Can I style the tooltip?
A. Yes, but only if you have the pretty tooltips enabled (via settings or the filter). The class you want to style in your custom CSS is ‘.text-hover-qtip’.

Q. Does this plugin explicitly support any third-party plugins?
A. Yes. While this plugin is compatible with many other plugins that modify post and widget text, this plugin has explicit built-in support for Advanced Custom Fields and Elementor, which provide additional content areas. This plugin provides hooks that can be used to enable compatibility with other plugins and themes.

Q. Does this plugin include unit tests?
A. Yes.

Release Log

3.9.1 (2020-01-12)

  • Fix: Revert to apply to the the_excerpt filter, which was mistakenly changed to get_the_excerpt
  • Change: Update some inline documentation relating to third-party plugin hook support
  • Unit tests:
    • Change: Implement a more generic approach to capture default values provided for a filter
    • New: Add test to verify the lack of any defined hover text doesn’t remove zeroes from text
    • Fix: Correct typo in function name used

3.9 (2020-01-08)

  • This minor release adds support for select third-party plugins (Advanced Custom Fields, Elementor), tweaks plugin initialization, fixes a minor bug, updates the plugin framework to 049, notes compatibility through WP 5.3+, creates CHANGELOG.md, and updates copyright date (2020).

Details:

  • New: Add support for third-party plugins: Advanced Custom Fields, Elementor
  • New: Add filter c2c_text_hover_third_party_filters for filtering third party filters
  • Fix: Define uninstall() as being static
  • Change: Initialize plugin on plugins_loaded action instead of on load
  • Change: Update plugin framework to 049
    • 049:
    • Correct last arg in call to add_settings_field() to be an array
    • Wrap help text for settings in label instead of p
    • Only use label for help text for checkboxes, otherwise use p
    • Ensure a textarea displays as a block to prevent orphaning of subsequent help text
    • Note compatibility through WP 5.1+
    • Update copyright date (2019)
  • Change: Variablize the qTip2 version and use it when enqueuing its JS and CSS
  • New: Add CHANGELOG.md and move all but most recent changelog entries into it
  • New: Add inline documentation for hooks
  • Unit tests:
    • Change: Update unit test install script and bootstrap to use latest WP unit test repo
    • Change: Explicitly check hook priority when checking that hook is registered
  • Change: Note compatibility through WP 5.3+
  • Change: Update copyright date (2020)
  • Change: Update License URI to be HTTPS
  • Change: Split paragraph in README.md’s “Support” section into two

3.8 (2018-08-01)

  • New: Ensure longer, more precise link strings match before shorter strings that might also match, regardless of order defined
  • New: Add support for finding text to hover that may span more than one line or whose internal spaces vary in number and type
  • Fix: Prevent hover text from being embedded within other hover text
  • Change: Switch for using deprecated ‘acronym’ tag to using ‘abbr’
  • Change: Display fancy hover text as white text on a dark gray background
  • Change: Cast return values of hooks to expected data types
  • Change: Add version number when enqueuing CSS files
  • Change: Update plugin framework to 048
    • 048:
    • When resetting options, delete the option rather than setting it with default values
    • Prevent double “Settings reset” admin notice upon settings reset
    • 047:
    • Don’t save default setting values to database on install
    • Change “Cheatin’, huh?” error messages to “Something went wrong.”, consistent with WP core
    • Note compatibility through WP 4.9+
    • Drop compatibility with version of WP older than 4.7
    • 046:
    • Fix reset_options() to reference instance variable $options
    • Note compatibility through WP 4.7+
    • Update copyright date (2017)
    • 045:
    • Ensure reset_options() resets values saved in the database
  • New: Add README.md
  • New: Add GitHub link to readme
  • Change: Store setting name in constant
  • Unit tests:
    • Change: Improve test initialization
    • Change: Improve tests for settings handling
    • Change: Default WP_TESTS_DIR to /tmp/wordpress-tests-lib rather than erroring out if not defined via environment variable
    • Change: Enable more error output for unit tests
    • New: Add more tests
    • New: Add header comments to bootstrap
  • Change: Note compatibility through WP 4.9+
  • Change: Drop compatibility with version of WP older than 4.7.
  • Change: Tweak plugin description
  • Change: Minor code reformatting
  • Change: Add example of better looking tooltip alongside basic tooltip example
  • Change: Rename readme.txt section from ‘Filters’ to ‘Hooks’
  • Change: Modify formatting of hook name in readme to prevent being uppercased when shown in the Plugin Directory
  • Change: Update installation instruction to prefer built-in installer over .zip file
  • Change: Update copyright date (2018)

Copyright & Disclaimer

Copyright © 2009-2020 by Scott Reilly (aka coffee2code)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.

Discussion / Support

Have any questions, comments, or suggestions? Please provide them via the plugin’s WordPress.org support forum. I’ll do my best to reply in a timely fashion and help as best I can.

Unfortunately, I cannot provide guaranteed support, nor do I provide support via any other means.

Was this plugin useful useful to you? Consider giving it a rating. If you’re inclined to give it a poor rating, please first post to the support forum to give me a chance to address or explain the situation.

7 replies on “Text Hover”

[…] Text Hover von Scott Reilly ermöglicht es normalen Text mit einer “Hover” Funktion auszustatten. So können zum Beispiel, wenn man mit der Maus über den Text fährt einzelne Begriffe erklärt, oder zusätzliche Informationen angezeigt werden. Das Plugin funktioniert mit WordPress Versionen WP 2.2+, 2.3+ und 2.5+ Verwandte Artikel […]