Hi, Dear users of WordPress tooltip plugin, hope this message find you are doing well and having happy day with your family We got an amazing wordpress tooltip user’s ticket in which he said “I want that when I hovering over a text icon(whose image is the result of the following html code: ”, the chosen custom tooltip is launched and with the effect …” ….etc 🙂
WordPress tooltips pro plugin have supported this feature with a few methods, because we got many suggestion from wordpress tooltip users, they hope tooltips provide additional information or context when users hover their mouse over an icon. This can help users understand the purpose or function of the icon without the need for explicit instructions, enhancing the overall user experience.
We believe many users have similar question, we’d like write a detailed document for wordpress tooltip users to display a wordpress tooltip windown when users mouse hover a icon.
Method 1 of add tooltip effect on icons: via wordpress tooltip fontawesome shortcode
wordpress tooltip support use more than 1500 pretty font awesome icon logo to via font awesome tooltip shortcode, the font awesome tooltip shortcode looks like this:
[ttfa tooltip_id=”3195″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″]
the result of font awesome icons tooltip look like this:
As you can see, when mouse hover the icon question, you will find our purchase QRcode image pop-up in wordpress tooltip window.
Method 2 of add tooltip effect on icons: via icon tooltip shortcode
WordPress tooltips pro plugin and wordpress tooltips pro plus plugin support another icon tooltip shortcode, the wordpress icon tooltip shortcode looks like this:
[icon_tooltip_by_id tooltip_id=‘3195’][/icon_tooltip_by_id]
the result of wordpress icon tooltip shortcode looks like this:
🙂As you can see, we added tooltip effect on a smile icon, you can find more details about wordpress icon tooltip in here 🙂
Method 3 of add tooltip effect on icons: via SVG icon tooltip shortcode
WordPress tooltips pro plus plugin support wordpress SVG icon tooltip shortcode to support add wordpress tooltip effect on SVG icons. Now more and more wordpress blogger start using a lot of complex SVG icons in their wordpress sites, by wordpress SVG tooltip, tooltips can be used to clarify the meaning of icons, especially if the icons are not immediately recognizable or if their purpose is not self-evident. This can reduce user confusion and improve navigation. Adding tooltips with smooth transition effects can also enhance the visual appeal of a website. These effects can make the website feel more interactive and modern.
What is SVG?
The wordpress SVG tooltip looks like this:
[tooltips keyword=’good’ content = ‘this is wordpress SVG tooltip for the SVG icon up!’]
[/tooltips]
In your wordpress posts, you can use tooltips short code to insert WordPress SVG Icons and add tooltip effect on these wordpress svg images, please check sample at below, we added SVG tooltip for each svg tooltip arrow:
You can find more detailed document of wordpress SVG tooltip shortcode in here.
Method 4 of add tooltip effect on icons: via tooltips for any thing
Because there are many users said they inserted many elements by 3rd plugins in wordpress posts, they hope our wordpress tooltip developer custom tooltips to support their 3rd plugins, but many plugins have no any API at all, in this case, we cannot hook a API to add tooltips effect on elements which generated by these 3rd plugins, so we developed a function named tooltips for any thing.
If your element have a CSS ID or CSS class, then you can add tooltips on these CSS ID or CSS CLASS by tooltips for any thing. 🙂
How to use tooltips for any thing?
10: Click “Tooltips” menu item, it looks like this:
tooltips menu items
11: Click “Add new” sub menu item, you will open Tooltips Creator, it looks like this:
tooltips editor
12: In the above diagram, you can see that we have a metabox “Tooltips for Forms”, actually the title should be Tooltips for Classes, but we found, the most common application scenarios are add tooltips on form’s elements / form’s fields by css class or css ID, for help users understand the metabox, we changed the tootlips for class as tooltips for forms 🙂
13: Please just enter your css class or css id, which you hope adding a tooltip effects in the ” Tooltip For Forms ” input box, if you do not know how to find CSS Class or CSS Id for component in wordpress, please read How to find a css Class or css ID of component in wordpress page?
for example, tooltips for class:
.input_box_1
or tooltips for id
#text_box_2
14: Please ensure you have typed tooltips title and tooltips content in tooltips editor, then click “Publish” button
15: In front end, if you open the page which have the css class or css ID, when you mouse hover the class element, you will find the tooltip content pop-up in tooltip window
16: In here, you can find a tooltips for class DEMO. In the form, when you mouse hover any field, you will find a dedicated tooltip window pop-up, by this way, you can add tooltips for any css or id in the front end, for example: tooltip for contact form, tooltip for image, tooltip for video, tooltip for buttons, menu items, maps, text…. and so on
You can find more detailed document about tooltips for any thing at here
Also there are more image tooltip shortcodes and icon tooltip shortcodes in wordpress tooltip plugin, we have detailed document of how to use wordpress tooltip shortcode, in here you can find more detailed document of wordpress tooltip shortcodes.
Conclusion
Overall, adding tooltip effects to icons is a common practice in web design to improve usability, accessibility, and the overall aesthetics of a website. It’s a way to provide users with helpful information and guidance while interacting with the site’s interface.
WordPress Tooltips can be used to provide brief tips, warnings, or explanations for all kinds of icons on a wordpress website, helping users make informed choices.
