How to Disable Image Titles and Link Destinations on Hover in WordPress

If you’re managing a WordPress website and noticing that image titles and link destinations appear when users hover their mouse over links or images, this can be distracting or clutter your site’s appearance. Fortunately, in most cases, this behavior is controlled by HTML attributes or theme settings, and disabling it is straightforward. In this comprehensive guide, we’ll explain how to turn off or hide hover titles and link destinations in WordPress, whether you’re using a specific theme like The Gem or custom code.

Understanding the Causes of Hover Text in WordPress

What Causes Image Titles and Link Destinations to Show on Hover?

In WordPress, the default behavior for links and images is to display additional information when users hover over them. This info is primarily controlled by HTML attributes:

• title attribute: Adding a title to an image or link causes it to display on hover by default.
• alt attribute: Used for accessibility, but not displayed on hover.
• Some themes or plugins automatically insert titles or link destinations into the HTML, which then appear as tooltips.

In addition, certain themes, such as The Gem, or page builders might have settings that influence this behavior. By understanding these underlying causes, you can better troubleshoot and apply specific fixes.

Common Situations That Lead to Hover Text Display

1. Default WordPress behavior: The theme or core WordPress automatically adds title attributes based on link text or image settings.
2. Custom HTML or code snippets: Developers might add title attributes intentionally for SEO or user guidance.
3. Plugins and page builders: Some plugins such as Elementor or Beaver Builder add hover titles for aesthetic or navigation aid purposes.
4. The Gem Theme settings: The theme may have built-in options that display or hide these hover tooltips.

Understanding which cause applies to your site helps you choose the right method to disable hover text effectively.

How to Remove or Hide Image Titles and Link Destinations on Hover in WordPress

Method 1: Remove or Edit the title Attribute in HTML

The most direct approach involves editing the HTML to eliminate the title attribute from links and images.

1. Access your WordPress dashboard.
2. Edit the page or post where the images or links are placed.
3. Switch to the Text or HTML editor instead of Visual mode.
4. Locate the HTML code for the images or links that show hover text.
5. Remove the title attribute from these tags. For example:

<a href="your-link" title="Link info">Your link</a>

6. Update the page and preview to ensure the hover text no longer appears.

Note: If you’re using a page builder, such as Elementor, you often find an option in the widget settings to disable the title or tooltip.

Method 2: Remove the title Attribute Globally with Code

If many links or images have the title attribute set and you want to remove them all at once, inserting a custom JavaScript or jQuery snippet can help.

jQuery(function($){
  $("a, img").removeAttr("title");
});

Call this script via the theme’s custom JavaScript section or by enqueuing a custom script in your child theme’s functions.php file. This method removes all title attributes on hover, effectively hiding the tooltips site-wide.

Method 3: Adjust Theme Settings (Specifically in The Gem Theme)

The Gem theme and similar premium themes often include options to control hover behaviors. To disable hover tooltips:

1. Navigate to Appearance > Customize in your WordPress dashboard.
2. Look for options related to Image Hover Effects or Link Tooltips.
3. Disable or turn off the option that shows link destinations or image titles on hover.
4. Save your changes and refresh your site to verify the results.

Using CSS to Hide Tooltip Texts Without Modifying HTML

If you prefer a non-intrusive method, CSS can be used to hide all tooltips effectively. This is particularly useful if titles are added dynamically or via plugins.

• Add this CSS code to your theme’s custom CSS section or child theme:

a[title], img[title] {
  pointer-events: none;
}
a[title]:hover, img[title]:hover {
  cursor: default;
}

This approach disables the display of the tooltip but keeps other functionalities intact.

Best Practices & Considerations When Disabling Hover Text

• Accessibility: Be mindful that removing titles might affect users relying on tooltips for navigation clues. Consider alternative accessible cues.
• SEO Impact: Excessive removal of titles could diminish some SEO signals. Use carefully, especially in navigation links.
• Theme Compatibility: Always test changes across different devices and browsers to ensure consistent behavior.
• Backups: Before editing core files or theme code, make sure to back up your website to prevent data loss.

Frequently Asked Questions (FAQs)

Can I disable hover titles on specific images or links only?

Yes. You can target specific elements using custom CSS classes or IDs, or by editing the HTML for individual images or links to remove the title attribute only where needed.

Will removing hover titles affect SEO or user experience?

Removing tooltip titles can slightly impact accessibility and SEO, especially if they provide useful information. Balance design needs with user experience considerations.

Is there a plugin that can help disable hover tooltips site-wide?

Currently, most plugins focus on adding hover effects, but you can use custom JavaScript snippets or CSS to disable unwanted tooltips without installing additional plugins.

How do I ensure my changes do not break my site’s design?

Always test modifications on a staging environment first. Use browser developer tools to test CSS or HTML changes before applying them to your live site.

What other ways can I improve user experience without hover tooltips?

Consider adding descriptive alternatives like on-click modal windows, accessible labels, and clear visual cues to guide users, ensuring accessibility remains high.

Conclusion

Disabling image titles and link destinations on hover in WordPress can be achieved through several methods, ranging from editing HTML attributes to applying custom CSS or utilizing theme settings. The choice depends on your site setup, coding proficiency, and whether you want a global or targeted solution. By understanding the causes of hover text and applying the appropriate adjustments, you can create a cleaner, more focused user interface that aligns with your website’s design goals.

In 2026, optimizing user experience often involves minimizing unnecessary clutter, and managing hover tooltips is a key step. Remember to test your changes thoroughly and consider accessibility when making adjustments.