Today we will discuss how to easily add power and pretty wordpress tooltip in wordpress pages via wordpress tooltips shortcode — [tooltip_by_id tooltip_id=’2392′] 🙂
WordPress Tooltips shortcode is an easy way to add dynamic content with video / audio / google map … and so on in your wordpress posts or widgets, many users like use wordpress tooltips shortcode in their wordpress elementor editor or wordpress Visual Composer editor or other advanced wordpress editors.
How to Easily Add a Powerful & Pretty WordPress Tooltips in WordPress via WordPress ShortCode Very Fast?
If you have video tooltip, image tooltip, map tooltip… and so on, and if you want to use wordpress tooltip shortcode to insert video tooltip, image tooltip, svg tooltip… and so onin your wordpress post, just enter your video / image … and so on, please follow this suggestion:
1: login wordpress site as admin
2: click tooltips menu in wordpress dashboard
3: click add new sub menu item in tooltips menu
4:you will open wordpress WYSWYG editor, it looks like this:
wordpress tooltips WYSWYG editor
Please insert your video, image… and so on in this wordpress tooltips WYSWYG editor, just like use wordpress standard editor, it is very easy to use
5: After entered all content in wordpress tooltips WYSWYG editor, please click “publish” it
6: Then please check the URL in your browser, you will find the post id, for example:
tooltips.org/wp-admin/post.php?post=6880&action=edit&classic-editor
Just copy the post id “6880”
7: Back to your wordpress post which you want to insert wordpress tooltip shortcode, do not use the wordpress tooltip shortcode “tooltips”, please use wordpress tooltip shortcode “tooltip_by_id”, for example:
[tooltip_by_id tooltip_id=’6880′]
And it will works well in your wordpress editor and in the front end of wordpress post, the result looks like the tooltip which generated by wordpress tooltip shortcode “tooltips”
This is an example,
WooCommerce Tooltips By this way, you will save a lot of time, and it is easy to change and use 🙂
So why use shortcode [tooltip_by_id tooltip_id=’6880′], why do not use shortcode [tooltips] ?
The shortcode [tooltips] works well for most of users, but a few advanced tooltip editor like insert a lot of advanced functions in the shortcode [tooltips], then this may caused a few problems — if you are not a HTML expert, let’s say when you use wordpress shortcode to insert video or image in wordpress post, you need add many html codes manually, sometimes it will caused a few problems — if you are not a HTML expert, for example, in recent days, we get an amazing wordpress tooltips user’s ticket:
Hello,
I had to solve this problem :[[tooltips content = “<video width=’600px’
height=’300′ autoplay=’autoplay’ controls=’controls’> <source
src=’/wp-content/uploads/2022/04/LittleKing.mp4′ /></video>”]<img
class=”alignnone wp-image-11316″
src=”/wp-content/uploads/2022/03/Little-King-5-202×300.jpeg” alt=”” width=”75″
height=”111″ />[/tooltips]]When I switch from the text editor to visual the
apostrophes are replaced by quotes.[[tooltips content = “<video width=”600px”
height=”300″ autoplay=”autoplay” controls=”controls”> <source src=”/
wp-content/uploads/2022/04/LittleKing.mp4″ /></video>”]<img class=”alignnone
wp-image-11316″ src=”/wp-content/uploads/2022/03/Little-King-5-202×300.jpeg”
alt=”” width=”75″ height=”111″ />[/tooltips]]
To solve I publish.[[tooltips content = “<video width=’600px’ height=’300′
autoplay=’autoplay’ controls=’controls’> <source
src=’/wp-content/uploads/2022/04/LittleKing.mp4′ /></video>”]<img
class=”alignnone wp-image-11316″
src=”/wp-content/uploads/2022/03/Little-King-5-202×300.jpeg” alt=”” width=”75″
height=”111″ />[/tooltips]]
This way the editor switch leaves apostrophes intact.
Do you have a better idea?
Best regards.
In this case, the code:
[tooltips content = “<video width=“600px“ height=”300″ autoplay=”autoplay” controls=”controls”>…
it not right, there are too many ‘“‘ in the shortcode, it should be:
[tooltips content = “<video width=‘600px‘ height=’300′ autoplay=’autoplay’ controls=’controls’>…
But sometimes wordpress editor will not save your HTML with correct format which you entered in wordpress editor, for avoid this kind of problem we have a detailed how to use wordpress tooltip shortcode ducoment for wordpress tooltip users, in which we have a note to solve this kind of problem:
NOTE:
1. Input the wordpress tootlip shortcode in the wordpress text editor. This editing mode makes you write your wordpress multimedia tooltip content of HTML.
2. Select the option “Enable Advance Tooltips Shortcode” in “Tooltip Settings for this page“, or wordpress tooltip shortcode will not work.
Usage example
Input the wordpress tootlip shortcode in the wordpress text editor.
[tooltips keyword = "<img src='https://tooltips.org/wp-content/uploads/2018/08/girl.png' />" content = "<video controls='controls'><source src='https://tooltips.org/wp-content/uploads/2018/08/002.mp4' type='video/mp4'>Your browser does not support the HTML5 Video element.</video><h3>Multimedia Tooltip</h3>"]
- Tooltips keyword is the anchor image similar to a hyperlink.
- Img src specifies the URL of your image.
- The Content text entered will be shown on the popup tooltip box.
Basically, if you enabled metabox “Enable Advance Tooltips Shortcode” in wordpress tooltip editor, then wordpress editor will not lost your HTML format 🙂
But the amamzing wordpress tooltip user asked us a “better idea?” , Yes, we have better idea for the user, and we found a few more user have the similar problem, this is a ticket in 2022-01-10:
Hi, when I add the following code in ‘shortcode’:
[tooltips keyword = “<img src=”https://tooltips.org/wp-content/uploads/2021/11/Learn-to-play-the-piano-or-keyboard-from-scratch-June-2019.png” />” content = “test”]
It doesn’t show the image. Instead, it shows:
Proper Shortcode Usage is:
[tooltips keyword=’wordpress’ content = ‘hello, wp’]
or
[tooltips content = ‘hello, wp’]wordpress[/tooltips]
WordPress Tooltip Support Replied:
Thanks for the message 🙂
We are very happy to help you 🙂
Because we have many plugin versions with different functions, Would you please tell us:
1 the plugin version you are using
2 the URL related with the problem
3 a little more details to tell us how to find the problem in the URL
If you are using tooltips pro, you can find shortcode document and demo at:
How to use wordpress tooltip shortcode [tooltips] to add tooltips manually?
Thanks, have a blessed day with your family 🙂
Best Regards,
Support Team
The wordpress tooltip user replied:
I put it the next code:
[tooltips keyword = “<img src=”https://www.tooltips.org//wp-content/uploads/2021/11/Learn-to-play-the-piano-or-keyboard-from-scratch-June-2019.png” />” content = “<p style=”text-align: center;”>Very comprehensive piano course for total beginners. Includes 23+ hours of video, articles and lots of worksheets with scales, chords etcetera and with lots of play-along mp3-files. This course includes also <strong>music theory</strong>, <strong>reading music, playing by ear</strong> and the <strong>basics of improvisation</strong>. Learn the scales by playing songs accompanied by a band instead of endlessly running up and down the scale.</p>
<p style=”text-align: left;”><strong>WHEN YOU ENROLL IN THIS COURSE, YOU GET INSTANT ACCESS TO:</strong></p>
<ul style=”text-align: left;”>
<li>Hours of video lessons in HD quality</li>
<li>Access to course resources (play-along mp3’s, summaries, overviews of chords and scales, and more…)</li>
<li>Practical exercises to help you implement what you have learned</li>
<li>Premium instructor support</li>
<li>Lifetime access to course updates</li>
</ul>
<h3><strong>Now with 2 FREE eBooks :</strong></h3>
<img class=”alignnone wp-image-1727″ src=”https://www.tooltips.org/wp-content/uploads/2021/11/hardcoverjacket_747x1076alpha.png” alt=”” width=”226″ height=”326″ /> <img class=”alignnone wp-image-1606″ src=”https://tooltips.org//wp-content/uploads/2020/10/Music-Theory.png” alt=”” width=”260″ height=”323″ /> “]
I put it in a shortcode. I also tried to just put it in a paragraph-field, but WordPress automatically makes it a shortcode-field.
I also tried to put it in the next code in the Tooltips menu in WordPress in “Add New”:
[tooltips keyword = “<img src=”https://www.tooltips.org//wp-content/uploads/2021/11/Learn-to-play-the-piano-or-keyboard-from-scratch-June-2019.png” />” content = “test”>
and when I then look at the page https://www.tooltips.org/glossary/tooltip-pianocourse/ it seems to work and I see the image and when I hover over it I see the tooltip with the text “test”.
But when I add the long code above, it says:
Proper Shortcode Usage is:
[tooltips keyword=’wordpress’ content = ‘hello, wp’]
or
[tooltips content = ‘hello, wp’]wordpress[/tooltips]
So, this works only with the simple code and only on https://tooltips.org//glossary/tooltip-pianocourse/, but I want it to work on https://tooltips.org//music-courses/ …
I’m really completely stuck and don’t know what to do anymore.
I hope you can help me.
Thank you very much in advance,
WordPress Tooltip Support checked the code and we replied:
In your shortcode there are a few errors, for example,
[tooltips keyword = “<img src=”https://www.testsite.testsite/wp-content/uploads/2021/11/Learn-to-play-the-piano-or-keyboard-from-scratch-June-2019.png” />”
In HTML grammar — it is something like:
https://www.w3schools.com/html/html_examples.asp
or
http://trevorjim.com/a-grammar-for-html5/
…and so on
This section should be write as:
[tooltips keyword = ‘<img src=”https://www.pianotheoryexercises.com/wp-content/uploads/2021/11/Learn-to-play-the-piano-or-keyboard-from-scratch-June-2019.png” />’
Based on HTML grammar, you cannot use something like:
“<img src=”
You need use it as:
‘<img src=”
Else wordpress and browser will not work at all….
In your shortcode, there are too many errors and we used many times to fix them one by one, actually, our suggestion is:
1: use shortcode tooltip_by_id, it is some thing looks like:
[tooltip_by_id tooltip_id=’3107′], 3107 is a tooltip post id which you created in tooltips editor 🙂
2: in tooltips editor, create a new tooltip, and move content in tooltips editor, because in the current time, wordpress shortcode mechanism have many flaws yet, if you write content in tooltips editor, you can easily push the limits of the wordpress shortcode. You can achieve many complex effects in wordpress tooltips standard editor, and then use tooltip_by_id shortcode to reference the content of the tooltip term into any wordpress post or page. 🙂
3: in tooltips editor, after published tooltips posts, you will find tooltips id in browser URL, just copy you new post id to replace 3107, let’s say the post id of the new tooltip is 5001, then you just need write a simple shortcode like this:
[tooltip_by_id tooltip_id=’5001′]
By this way, you will save a lot of time, and it is easy to change and use 🙂
Hope this have a little help 🙂
Thanks, have a blessed day with your family 🙂
Best Regards,
Support Team
The wordpress tooltip user said the answer solved his problem exactly and he saved many hours to write wordpress shortcodes in wordpress editor 🙂
Conclusions
An amazing wordpress tooltip user asked us to give him a better idea to use wordpress tooltip shortcode insert video tooltip easier, we used a few days to write this detailed document for the wordpress tooltip user, yes, in wordpress tooltip plugin toolbox, we have better tool for wordpress tooltip shortcode user, the better idea is enter your video / image / audio / maps… and so on in a new wordpresst tooltip WYSWYG editor, and then keep the post id of this new wordpress tooltip, then insert wordpress tooltip tooltip_by_id in any wordpress post like this way:
[tooltip_by_id tooltip_id=’2392′]
Simple and Easy 🙂
