Tag: wordpress svg

How to Build a SVG Tooltip?

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

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

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
Tagged with: , , ,

WordPress Tooltips Glossary Plugin 12.9.8 Released, Developed License Management Module and MultiSite License Support SVG Icon Tooltips

Hi Dear WordPress Tooltip Glossary Plugin Users,
Hope this message find you are doing well and having happy days with your family! 🙂
Update at 2020-08-08, please check the detailed step by step WordPress SVG Tooltip Document: How to Use WordPress SVG Tooltip.
I am happy to report you, we just released wordpress tooltip glossary plugin 12.9.8, changes in this version:
1: We developed a license management module for wordpress tooltip plugin, this is just a start, we will continue add more features in the wordpress tooltip license module 🙂
2:  For MultiSite License Users, wordpress multisite license plugin star to support SVG icon tooltips, an amazing user told us, it is 2020s started in the world, we should support tooltips for SVG icons, SVG icons defined vector-based icons in XML format, it is super easy to edit all things for the SVG icons, for example,  color, animate… and so on, SVG Icons, is  a block of code, so the sizes of SVG icons is very small, he do not want to use PNG or JPEG icons on his site, he start use SVG and it improved his site and his life 🙂
Okay, the problem is wordpress do not support SVG, wordpress do not allow to upload SVG icons at all, we used a few days to learn the new tech in SVG area, now with wordpress tooltip multisite license plugin, you can upload SVG icons in wordpress and add tooltips for SVG Icons, a simple example of SVG tooltips can be find in below:



We will write a detailed document for WordPress SVG tooltip, you will see it soon 🙂
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 Glossary Plugin Support Team
Tagged with: , , , , ,
Top