Easily Display Rich HTML Tooltips Containing Images & Links In WordPress

Tooltips or infotips are used for showing hints when a mouse pointer is hovered over specified keyword or icon. Earlier we have discussed about displaying traditional tooltips in WordPress but now-a-days tooltips are not just limited to simple hint texts but various websites use them for showing HTML rich content containing images and links in them. Tooltips are not the popups, they only appear when mouse pointer is hovered over some icon or keyword and disappears as soon the pointer goes away.

In this tutorial we will explain you adding HTML rich tool tips in WordPress. So install and activate WordPress Tooltips plugin then follow the given steps:

Step-1

Upon activation the plugin adds a new menu ‘Tooltips‘ in your admin area sidebar. First, navigate to Dashboard -> Tooltips -> Global Settings page and choose your options for displaying tooltips like: 

You can set the plugin to display tooltips for all matching keywords or keep it limited to first keyword only. You can enable or disable tooltips for images, excerpts and also tags. So this is all about its options. Now let’s come to creating and displaying tooltips.

Step-2

Navigate to Dashboard -> Tooltips -> Add New page and you will be seeing a page similar to creating new post. Now, the mechanism is that the title of the tooltip acts as the keyword and the content area is the tooltip which will be displayed on mouse over.

HTML Tooltips in WOrdPress 1

Step-3

So add a title and use WordPress VISUAL or HTML editor for creating your tooltip. You can insert images and do pretty-much everything which you do while creating a new post.

WP HTML Tooltips

When you’re done, click the ‘Publish‘ button and the tooltip will go active on all keywords (present in posts, pages and other post types) similar to the title of your tooltip. You can create as many tolltips you need and manage them from Dashboard -> Tooltips -> All Tooltips page.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.