How to create a wordpress icon tooltip using tooltips shortcode (added SVG tooltip)?

A few days before, wordpress tooltips term wrote a document : How to Use WordPress Tooltip Shortcode tooltip_by_id in Woocomemrce Short Description? WordPress Tooltip Plugin 14.7.8,  we get a users of wordpress tooltips plugin, in which he asked how to use use WordPress Tooltip Shortcode [tooltips] to create pretty icon tooltip in wordpress tooltips and woocommerce products? Okay, with wordpress tooltip shortcode [tooltips], it is very easy to create pretty icon tooltips, I’d like write a tooltip document to help you understand how to use it 🙂

How to use use WordPress Tooltip Shortcode ‘tooltips’ to create pretty icon tooltip in wordpress tooltips and woocommerce products?

May be many users read our detailed wordpress tooltip shortcode document: How to use wordpress tooltip shortcode [tooltips] to add tooltips manually?, in that wordpress tooltip document, we have a section to add wordpress multimedia tooltip to an image using tooltip shortcode [tooltips] like this:

[tooltips keyword = "<img src='Source of image' />" content = "Alternative Multimedia content will be displayed as a tooltip"]

Actually, if you change the image src attribute as your icons and add width attribute, then you can make a pretty icon tooltip quickly, for example:

[tooltips keyword = 'Lovely Nurse' content = "‹img src='https://tooltips.org/wp-content/uploads/2021/06/nurse-tooltip.png' width='280' /›"]‹img style="margin-left: 10px;margin-right: 10px;" src="https://tooltips.org/wp-content/uploads/2021/06/nurse-tooltip.png" width="24" align="middle" /›lovely nurse[/tooltips]

Then it looks like this:

Lovely nurse:

Please mouse hover the nurse icon, you will find wordpress tooltip popup window, we will display the big lovely nurse image in the popup 🙂

Basically, you can insert any image or icon in the tooltip “content” attribute, and add any multiple-media content as tooltip term to crate an icon tooltip via thewordpress shrotcode [tootlips]

How to display Tooltip on SVG icons?

We have a detailed document How to Build a SVG Tooltip? You can use wordpress tooltip plugin to create a SVG tooltip easily:

1: Login your wordpress site admin

2: Click “Tooltips” menu item

3: Click “Addons” sub menu item to open “WordPress Tooltip Addons” panel

4: Then please select “Yes, support SVG image tooltips” in the option “Enable / Disable SVG Icon Tooltips”:

support SVG Icon Tooltips

5 Click “Update Now” button to save your settings

6 Click wordpress “Media” menu item, now you can upload a SVG icons, by default, wordpress do not allow upload SVG icons, but after enabled SVG tooltip in wordpress tooltip addons panel, you can upload SVG icon files in wordpress media panel

7 Then open your wordpress posts editor, then use wordpress tooltip shortcocode “tooltips” to add tooltip to the svg graphics element which you uploaded to wordpress, it looks like this:

In front end, it looks like this: