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.
what is font-awesome?
Font Awesome is a widely used icon toolkit that provides a collection of scalable vector icons that can be customized and styled using CSS. Instead of using traditional image icons, Font Awesome icons are implemented as fonts, which allows them to be easily manipulated using CSS properties like color, size, and effects.
Here are some key features of Font Awesome:
Icon Collection: Font Awesome offers a vast library of icons covering a wide range of categories, such as technology, communication, design, social media, and more. These icons can be used to enhance the visual appeal of websites and applications.
Scalability: Font Awesome icons are vector-based, meaning they can be resized without losing quality. This makes them suitable for various screen sizes and resolutions.
Ease of Use: To use Font Awesome icons, you include the Font Awesome CSS file in your project and then use HTML elements with specific class names to display the desired icons. These icons can be easily customized through CSS.
Customization: Font Awesome icons can be customized just like text. You can change their size, color, add effects like shadows or animations, and apply styles such as rotation and flipping.
Responsive Design: Font Awesome icons are compatible with responsive design principles, allowing them to adapt to different screen sizes and orientations.
Accessibility: Font Awesome icons can be made accessible to screen readers by providing appropriate text labels and ARIA attributes.
Regular and Solid Styles: Font Awesome icons come in two styles: regular and solid. The solid style icons are filled in, while the regular style icons have outlines. This provides flexibility in choosing the right style for your design.
Open Source: Font Awesome offers both free and paid versions. The free version provides a substantial number of icons, while the paid Pro version offers additional icons and features.
Font Awesome is commonly used in web development, including WordPress, to easily add visually appealing icons to websites and applications without relying on image files. It simplifies the process of managing and styling icons while maintaining a consistent and professional appearance across different platforms.
WordPress tooltips pro plus plugin have integrated more than 1500 Font Awesome pretty icon logo for wordpress tooltip users 🙂
How to use more than 1500 pretty icon logo tooltip via font awesome tooltip?
1: check wordpress tooltip download to download newest version of wordpress tooltip pro + plugin
2: Upload the wordpress tooltip plugin (zip file) via plugins panel in your wordpress, if you are new user of wordpress tooltip, please check our video of how to install wordpress tooltip at: WordPress Tooltips Video Tutorial 3: How to upload and activate wordpress tooltips pro plugin
3: insert wordpress tooltip font-awesome shortcode in wordpress post like this:
[ttfa tooltip_id=”3195″ set=”fas” icon=”fa-question-circle” size=”2x” color=”#9ee2c6″]
4: You can custom the font-awesome tooltip shortcode very easy:
a: you need insert the id of a tooltip which have the image or text content, in the shortcode, the tooltip_id is the tooltip post id that you created in wordpress tooltip editor, in my sample, it is “3195”, you can find this id by:
a.1: click tooltips menu item
a.2: you will find all tooltips control panel, in here we listed all tooltips in the list, you will find you can edit each tooltip via click “edit” link under the tooltip terms.
a.3: just mouse hover the “edit” link, you will find some edit links like: tooltips.org/wp-admin/post.php?post=3195&action=edit&classic-editor, this id: 3195 is the tooltip id which have the tooltip image / tooltip video / tooltip audio or tooltip text content.
b: custom the set, you can select values from:
fas — solid icons
far — regular icons
fab — brand icons
c: select an pretty icon, you can see we have use the font awesome icon question-circle to realize your requirement, in wordpress tooltip pro plus font-awesome, we support about 1588 pretty font-awesome icons which you can insert in wordpress tooltip font awesome shortcode, you can find icon name from font-awesome official site, just google it 🙂
d: custom the size of your icon, you can increase the size to use 3x, 4x…etc
e: custom the color of tooltip icon, you can change it as any color, for example, #eeeeee, etc
By this way, you can create more than 1500 pretty icon tooltip easily 🙂
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?
SVG stands for Scalable Vector Graphics, SVG is an XML-based vector graphics format used to display a variety of graphics on the Web and in other environments.
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.
[/tooltips]
