Dear WordPress Tooltip Users,
In this document, I will help you to use SVG tooltip in wordpress tooltip just a few minutes 🙂
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.
What is Tooltip?
Based on description of WordPress Tooltip: Tooltips are small popup box with more information like video / audio / image / google maps / QR code / text… and so, tooltips box will pop up when users hover over an element in your pages, the element can be a word in your post, a search form input box, an image in your page, a widget on your sidebar.. and so on,
wordpress tooltip plugin supports add tooltip effect on any element on the wordpress posts.
How to Make a SVG Tooltip in WordPress?
SVG is becoming more and more popular, most major browsers already support SVG. with SVG you can build faster and pretty icons quickly, many users use SVG create many pretty icons, so how about use your pretty SVG icons and Tooltip to create a SVG icon tooltip?
With WordPress Tooltip Plugin, it is very easy to create SVG tooltip:
1: If you didn’t installed wordpress tooltip, please login your account at wordpress glossary tooltip plugin site, if you have installed wordpress tooltip plugin, please jump to step #10 directly 🙂
2: Download wordpress tooltip plugin at “My account” page
3: Login wordpress as wordpress admin
4: After logged in wp-admin, please click “Plugins” menu item in wordpress back end
5: Deactivated old tooltips version
6: Delete the old wordpress tooltip plugin
7: In “Plugins” menu item, click add new at the top of the plugins panel
8: Upload the tooltips plugin zip file which you downloaded from wordpress glossary plugin site
9: Activate latest version of wordpress tooltip glossary plugin
10: Click “Tooltips” menu item
11: Click “Addons” sub menu item, you will open “WordPress Tooltip Addons” panel
12: At the bottom of the WordPress Tooltip Addons panel, you will find Enable / Disable SVG Icon Tooltips option box, it looks like this:
support SVG Icon Tooltips
13 Please select Yes to enable SVG Image Tooltips functionality.
14 Click “Update Now” blue button
15 Now you can start to upload SVG to your WordPress site, please note, by default, wordpress do not support SVG, so if you did not enable our “SVG Tooltips” addon, when you try to upload SVG images, wordpress will told you upload failed, after installed our plugin, wordpress svg support will be enabled by our wordpress tooltips plugin 🙂
16 When you write a post, just click “Add Media” button in your wordpress editor, to upload a SVG tooltip, it looks like this:
add media button to upload svg icons
In front end, if you open glossary index page, you will find the underline color of glossary terms has been changed
17 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:
it is very easy to use the wordpress tooltip short code to add tooltips on these wordpress svg logo, the shortcode should looks like this:
That’s all, we get an user’s feedback: WordPress Tooltips is an amazing tooltip, I was use svg tooltip javascript to make svg tooltip, becase I cannot find a wordpress svg plugin, it is a hard work, after installed wordpress tooltip plugin, it make the pretty & customizable SVG tooltip easily and it make my life more easier!
Yes, we are very happy for the feedback, because we used a lot of time to develop wordpress SVG tooltip functions, if you have any question or suggestion of wordpress tooltip plugin, please don’t hesitate to tell us 🙂
Thanks, have a blessed day with your family 🙂
Best Regards,
WordPress Tooltip Plugin Support
