Dear  WordPress tooltip plugin users, hope this message find you are doing well and have happy days with your family 🙂  Our wordpress tooltip developer have released wordpress tooltips pro plus plugin 16.3.4, to support enter wordpress image tooltip shortcode inline in Gutenberg 🙂

We got a ticket from a wordpress tooltip user:

Hello,
I’m trying to implement an image tooltip in the Gutenberg editor with this inline shortcode,
[tooltips keyword="Walnut" content="<img src='https://www.mydomain.com/wp-content/uploads/2021/06/Photo-1024x700.jpg'>"]]
and it looks like this “Walnut” and no image pops up and it says:

Proper Shortcode Usage is:
[[tooltips keyword='wordpress' content = 'hello, wp']]
or
[[tooltips content = 'hello, wp']]wordpress[[/tooltips]

All with single quotation marks ?

Your example here
https://tooltips.org/how-to-use-wordpress-tooltip-shortcode-tooltips-to-add-tooltips-manually/ says this:
[tooltips keyword="lovely girls" content="<img src='https://mydomain.com/wp-content/uploads/2017/02/screenshot.png'>"]
That’s not the same…is the keyword with single or double quotation mark?

On your site you don’t mention if you have must use Classic Editor (old) or if you can use Gutenberg Block editor (Paragraph/HTML) or the Classis editor block from Gutenberg which only has text possibility? It supposed to work inline in all these editors right?

It seems the Gutenberg editor doesn’t accept the single quotation marks before and after the image because they transform automatically in “
Is this the reason it doesn’t work?

Than there’s the overall question about the single and double quotation marks, I’ve tried every combination with “your” marks see  below above the line and “mine” below the line.
They vary also (is this important?), how do I replicate yours besides copying them? I’ve tried them all btw.
‘
“
“
‘
Is the Tooltips plugin actually compatible with Gutenberg editor or must I have to use the old editor?

I’d rather want to use this shortcode method for such a simple code than the tooltip editor with use of [Tooltip For Forms Demo - Message Field ]
(this works btw) because it’s more flexible with the term you want to use and quicker if it works right away. 🙂 And if you delete a tooltip in the editor your text/term in the post is gone also.

I’ve read https://tooltips.org/how-to-easily-add-a-powerful-pretty-wordpress-tooltips-in-wordpress-via-wordpress-shortcode-very-fast/

Could you explain under which conditions this might be going to work?
Is there a workaround?

Our wordpress tooltip plugin developer checked this question, yes, Gutenberg will change something in your content, for example, add the tag <p> automatically, replace ‘ with “ automatically….etc. If you are using a tooltip text shortcode , there are no any problem, but if you are using a wordpress image tooltip shortcode, because Gutenberg will change ‘ to “ automatically, if you did not entered image tooltip with correct format( the format is: In the shortcode, after the tag content, please use ‘, and after the tag img src, use “, please check description of the correct format at below), image tooltip shortcode will not works well, that’s why we develop a new version — wordpress tooltips pro plus 16.3.4 to solve this kind of problem 🙂

How to Insert Image Tooltip Shortcode Inline in Gutenberg?

1: Download newest wordpress tooltips plugin

2: Login your wordpress admin area, delete old version of wordpress tooltips pro plus plugin

3: upload / activate the newest version of wordpress tooltips pro plus plugin

4: in Gutenberg block, just copy and past the tooltips image shortcode directly, the real result in your block will looks like this: lovely girls

Actually the code of image tooltip shortcode looks like this:

 [tooltips keyword="lovely girls" content='<img src="https://tooltips.org/wp-content/uploads/2014/03/ben-white-179058.png">']

please note: a few user said their shortcode cannot works in Gutenberg, that is because they use the error format like this:

1 [tooltips keyword=”lovely girls” content=”<img src=’https://tooltips.org/wp-content/uploads/2014/03/ben-white-179058.png’>”]

This will not work, because Gutenberg will replace the ‘ in shortocode to “ format automatically like this:

2 [tooltips keyword=”lovely girls” content=”<img src=”https://tooltips.org/wp-content/uploads/2014/03/ben-white-179058.png”>”]

User have no way to stop Gutenberg replace the ‘ to “, even you update the format manually, once Gutenburg saved the post, Gutenberg will replace the ‘ to “ again — automatically, so editor must use the correct format like this:

[tooltips keyword=”lovely girls” content=’<img src=”https://tooltips.org/wp-content/uploads/2014/03/ben-white-179058.png”>’]

The rule is: In the shortcode, after the tag content, please use ‘, and after the tag img src, use “

When you enter the wordpress image tooltip shortcode inline Gutenberg, Gutenberg will display the image directly in Gutenberg editor, we make the screenshot of our current post, it looks like this:

When you publish the post, all things will works well in front end automatically 🙂

5: Please note, At the right hand of Gutenberg, we have a metabox “Tooltip Settings for this page”, please remember checked the option “Enable Advance Tooltips Shortcode” 🙂

Does image tooltip shortcode works in Guternberg code editor?

Yes, just insert the tooltip shortcode with the correct format, all things works well in Guternberg code editor too.

The rule of the format of Gutenberg is: In the shortcode, after the tag content, please use ‘, and after the tag img src, use “

We make the screenshot of Gutenberg code editor for users too, it looks like this:

If you have any more question or feature request to wordpress tooltip plugin, please don’t hesitate to contact us, we are very happy realize it for you 🙂

Thanks, have a blessed day with your family 🙂

Best Regards,

WordPress Tooltips Plugin Support