Home › Wordpress Tooltip Plugin Document › How to Build a SVG Tooltip?

How to Build a SVG Tooltip?

Posted on by wordpress tooltips Posted in Wordpress Tooltip Plugin Document — 2 Comments ↓
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 🙂
Purchase Now
Thanks, have a blessed day with your family 🙂
Best Regards,
WordPress Tooltip Plugin Support

Related posts:

  1. WordPress Tooltips Glossary Plugin 12.9.8 Released, Developed License Management Module and MultiSite License Support SVG Icon Tooltips
  2. WordPress Tooltip Glossary Plugin 13.0.4 Released, Support SVG Tooltip Better
  3. WordPress Tooltip Glossary Plugin 13.8.8 Released, Support Category Archive Tooltip
  4. WordPress Tooltips Free 7.2.9 Released
Tagged with: , , ,
2 comments on “How to Build a SVG Tooltip?”
  1. wukong288 says:
    at

    So easy to use, excellent tool, excellent to create not only text tooltips but also amazing tooltips with videos, audio, music, shortcodes, listings, glossaries…

    Reply
  2. Doughnut says:
    at

    Outstanding work! I’ve seen your content before, and I must say you’re truly impressive.
    I really appreciate what you’ve created here. You make the tooltip experience enjoyable while consistently enhancing it.
    I look forward to learning even more from you. This plugin is absolutely fantastic!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*