Category: Wordpress Tooltip Plugin Document

Fixed the bug of Hide count number of glossary items, wordpress tooltips pro plus 23.4.8 and wordpress tooltips pro 17.4.6 Released

Hi, Dear users of  WordPress tooltip  plugin, hope this message find you are doing well and having happy day with your family We got a ticket from an amazing wordpress tooltip user, in which he told us, some times, he found letter count number still displayed in  navigation bar, although he have set up the option Hide count number of glossary items as “yes”. The wordpress glossary settings panel looks like this:

Hide count number of glossary items

After got the bug report, our wordpress tooltip developer checked it carefully, finally, he found the reason and released  wordpress tooltips pro plus 23.4.8 and wordpress tooltips pro 17.4.6 to fix the bug.

Thanks for the great report, we give the user a license of “WordPress Email Blacklist Plugin” as a THANKS, WordPress Spam Email Blacklist Plugin is a wordpress plugin which allow you build a spam email blacklist to prevent spammers register as your users, also you can import spam email blacklist from our csv file via import blacklist menu item, we will add this spam email domain blacklist once we find new spam email domains

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

Best Regards,

WordPress tooltip plugin support

Tagged with: , , ,

WordPress tooltips 23.3.8 released, improved the function of tooltip synonyms

Hi, Dear WordPress tooltip users , hope this message find you are doing well and having happy day with your family 🙂

We got an amazing wordpress tooltip user’s ticket, in which he said:

Hi there, I am having a problem with the synonyms while making a glossary. When using more than one seperated by the | symbol, none show up on the page.

Sorry for the problem, this is the first time we heard this kind of problem, our wordpress tooltip developer tested all options in wordpress tooltip settings panel, but all things works well always, finally we believe the user is using wordpress tooltip synonyms with a specify method, then we  tried to enter all kinds of strange things in the tooltip synonyms metabox,  then we found if we do not follow tip of tooltip synonyms and enter a lot of space,  we can re-play the problem, it looks like this:

Synonyms of the keyword

As you can see, what we entered in the tooltip synonyms metabox is ” delete | first | second “, this caused error, in the tooltip synonyms metabox, we have the top: ( separated by ‘|’ ) , so correct format is:
“delete|first|second”, we guess maybe more users would like enter synonyms like ” delete | first | second “, so our developer released a new version wordpress tooltips pro plus 23.3.8 to solve this problem, please note, we will only removes spaces from the begin and end of the each synonyms, if there are consecutive spaces within the string, whey will be preserved 🙂

Thanks for report the problem, we added a  license of WordPress Life Quotes Plugin, WordPress Life Quotes Plugin is a lovely plugin to display random life quote on the bottom of wordpress post, life quote can serve as a source of inspiration and motivation for readers, including a random life quote in a wordperss post can help to break up the text and make the content more visually interesting and engaging and creating a connection with readers. 🙂

If you have more question or feature request, please don’t hesitate to contact us, we are very happy to realize your feature request 🙂

Best Regards,

WordPress tooltip plugin support

Tagged with: ,

How to link tooltip terms to tooltip page automatically? Supported by wordperss tooltip free 8.9.1, wordpress tooltips pro 17.3.6, Improved tooltip link function in WordPress tooltips pro plus 23.2.8

Hi, Dear WordPress tooltip users , hope this message find you are doing well and having happy day with your family

We got another plugin user submitted a ticket: “Hello! I am working on a website which needs to accessible (WCAG2.0). For example I want to access the tooltips with tab key. (esaenitaly :focus instead of :hover) Is this possible for me to change with free version? ”, when we try to support WCAG2.0(Web Content Accessibility Guidelines 2.0),  we found it is not all HTML tag support tabindex attribute, only a small percentage of HTML TAGs support the TABINDEX attribute: input, a link, button, select, iframe, video….etc, so if we want to support access tooltips with tab key, we need use these HTML tag. Finally we remember we developed a tooltips pro plus version which support link tooltip term to tooltip glossary page automatically in a few months, based on another amazing user’s feature request: “automatically link the wordpress tooltip keyword inside a wordpress post to the wordperss glossary item page”. So we decide move this function from tooltips pro plus version to wordpress tooltip pro and free version for users, and we enhanced functions of this feature in this  version,  then in the next step,  we can support access tooltip terms via tab key in tooltips in wordpress post. 🙂

How to automatically link the wordpress tooltip keyword inside a wordpress post to the wordperss glossary item page?

1:  download last version of wordpress tooltip plugin from wordpress plugin lib or via  wordpress tooltip glossary plugin

2: Install latest version of wordpress tooltips plugin in your wordpress site,  new user please check our  video of how to install wordpress tooltip at:  WordPress Tooltips Video Tutorial 3: How to upload and activate wordpress tooltips pro plugin

3: In wordperss dashboard click “Tooltip” menu , then click “optional settings” sub menu item, you will open “optional settings panel”, it looks like this:

add link on tooltip term to tooltip page in tooltip optional settings panel in tooltips pro plus 19.8.8

add link on tooltip term to tooltip page in tooltip optional settings panel in tooltips pro plus 19.8.8

4: The screenshot is come from tt pro plus 19.8.8 , but the option “link tooltip terms to tooltip page automatically?” section  is the same.   if you select “Yes” in option “link tooltip terms to tooltip page automatically?”, then in front-end, all tooltip keyword in wordpress post will be linked to wordpress glossary item page automatically.

If you select “No”, then nothing will be changed

Conclusion:

Thanks for the great suggestion again, one major benefit of linking glossary keywords in WordPress posts to their respective glossary item pages is that it can enhance the user experience. By linking technical or industry-specific terms within a post to their corresponding glossary definitions, readers can quickly and easily learn what these terms mean without having to leave the page they are on. This can improve comprehension and help readers engage with the content more effectively.

Another benefit of linking glossary keywords to their respective glossary item pages is that it can potentially improve search engine optimization (SEO). Internal linking within a website can help search engines crawl and index pages more effectively, which can improve search engine rankings and increase website traffic. By linking glossary keywords to their corresponding glossary item pages, WordPress users can create a more interconnected and optimized website structure.

Overall, linking glossary keywords in WordPress posts to glossary item pages can improve the user experience, potentially boost SEO, and make it easier for visitors to engage with technical or specialized content. It is a useful technique for anyone looking to create an effective and engaging website.

We are moving tab index function from wordpress tooltips pro plus to tt pro and tt free now, you will see it soon 🙂

If you have any more feature request or if you have any question about wordpress tooltip plugin, please don’t hesitate to contact us

Tagged with: , , , ,

How to remove the numbers from the wordpress tooltip alphabet NAV?

Hi, Dear users of wordpress tooltip plugin , hope this message find you are doing well and having happy weekend with your family 🙂 We got a ticket from an amazing wordpress tooltip free user, in which he asked us a question:

How do we get rid of or clean up the alphabetical navigation at the top of the glossary. The plugin is version 8.8.5. we want to remove the numbers of remove the entire alphabet NAV here

We did a check of his page, we found he did not enabled “Hide count number of glossary items” option in glossary settings, At 2021-04-15, in wordpress tooltips pro plugin 14.4.4 we realized this feature  “to Display / Hide Count Numbers for Glossary Letters in Glossary Navigation” because another amazing user’s feature request:

A tooltip user has made a feature request for wordpress tooltip plugin:

On the navigation bar of Glossary, is it possible to not show the number of each letter

And then at 2022-06-14 we moved this function to wordpress tooltips plugin free version because another user want this function on his site. It is very easy to display or hide numbers of wordpress glossary  we believe more users have the same question, so we think it is better to write a detailed step by step for the user to solve the problem for him 🙂

How to remove the numbers from the wordpress tooltip alphabet NAV?

1 please login your wordpress site as wordpress admin

2 then in wordpress dashboard, please click “tooltips” menu

3 now please click glossary settings sub-menu item

4 you will open wordpress glossary settings panel, this is a screenshot of pro version which created by wordpress tooltips pro 14.4.4, but wordpress tooltip free verion and wordpress tooltip pro version have the same option  “enable / disable number of letters in the glossary navigation ”, it looks like this:

wordpress glossary settings panel of wordpress tooltip 14.4.4

wordpress glossary settings panel of wordpress tooltip 14.4.4

5: As you can see, there are an option “Hide count number of glossary items” at the bottom of the wordpress glossary setting panel, if you select the option “Yes”,  then in the front end, we will hide count number of letters in glossary  navigation bar , if you select “No” (this is default value), then in font end , we will display count number on each glossary items, it looks like this:

woocommerce glossary tab with full items

woocommerce glossary tab with full items

Hope this have a little help 🙂

Thanks for the contact us and this document will help more users use wordpress tooltips better, we’d like give a license of WordPress live link preview plugin for the great user, as a THANKS 🙂 WordPress live link preview plugin is a light and fast and powerful plugin to display live link preview for your wordpress users. when users mouse hover a link on your wordpress post, WordPress live link preview plugin will display the live preview screenshot of the site in a wordperss tooltip popup window, users will see where you are sending them. By providing live link previews, users can quickly and easily preview the content of linked pages without having to leave the current page. This can help to improve the user experience and keep users engaged with the site. Live link previews can also save users time by allowing them to quickly preview linked pages without navigating away from the current page. This can be particularly useful for websites with a lot of linked content or for users who want to quickly skim through a large number of links.  Please just register a user and then tell us the username, we will add the plugin in your account as a THANKS  🙂

Also if you want to upgrade to wordpress tooltips pro version, we’d like offer 75% discount for you because your great ticket 🙂

If you have any question of feature request, please don’t hesitate to contact us, we are happy to build the best wordpress tooltip glossary plugin for you

Thanks, have a happy weekend with your family

Best Regards,

WordPress Tooltip Plugin Support Team

Tagged with: , , , , ,

How to make wordpress tooltip focussable(WCAG2.0)? Supported by WordPress tooltips pro plus 23.1.8

Hi, Dear users of wordpress tooltip plugin , hope this message find you are doing well and having happy days with your family A wordpress tooltip free plugin user submitted a ticket: “Hello! I am working on a website which needs to accessible (WCAG2.0). For example I want to access the tooltips with tab key. (esaenitaly :focus instead of :hover) Is this possible for me to change with free version? ”  It is the first time we heard about WCAG2.0, we did a search, then we understand WCAG 2.0 stands for “Web Content Accessibility Guidelines 2.0.” It is a set of guidelines and standards developed by the Web Accessibility Initiative (WAI) to make web content more accessible to everyone, including people with disabilities such as visual impairments and hearing impairments. These guidelines provide guidance to ensure websites and web applications are accessible, ensuring equal access for users across various devices and conditions. Our wordpress tooltip plugin developer said it is a important feature for people, so we re-developed wordpress tooltips pro plus 23.1.8 to realize it for the amazing wordpress tooltip user 🙂

What is WCAG2.0?

WCAG 2.0 stands for “Web Content Accessibility Guidelines 2.0.” It is a set of guidelines and standards developed by the Web Accessibility Initiative (WAI) to make web content more accessible to everyone, including people with disabilities such as visual impairments and hearing impairments. These guidelines provide guidance to ensure websites and web applications are accessible, ensuring equal access for users across various devices and conditions.

How to make wordpress tooltip focussable(WCAG2.0)?

1:  Download and install wordpress tooltips pro plus plugin

2: login wordpress as admin and click tooltips menu item,

3: After activate wordpress tooltips pro plus plugin, please click tooltips menu item in wordpress dashboard, the menu of wordpress tooltips pro plus looks like this:

wordpress tooltip menus 14.3.6

wordpress tooltip menus 14.3.6

4: then click optional settings sub menu item, you will open wordpress tooltips optional settings panel, it looks like this:

Enable Disable access tooltip with tab key in wordpress tooltis pro plus 23.1.8

Enable Disable access tooltip with tab key in wordpress tooltis pro plus 23.1.8

5: in the option settings panel, please enable the option “link tooltip term to tooltip page automatically in wordpress”

6: then at the bottom of the wordpress tooltips plugin optional settings panel, there are new option: “enable / disable access tooltips with tab key”, if you enable access tooltips with tab key, then in the front-end,if the user keeps pressing the TAB KEY on the page, when the Tooltip term receives focus, the tooltip window will automatically pop up.

7: when the Tooltip term loses focus, the tooltip window will automatically hide.

Now we are try to add these features in tooltips pro and tooltips free version, and then we will release free version and we will give the amazing a plugin license as a gift 🙂

Thanks for the great feature request if you have any more requirement, please don’t hesitate to contact us, we are happy to realize if for you,  have a blessed weekend with your family 🙂

Best Regards,

WordPress tooltips plugin support

Tagged with: , ,

How to increase the line spacing between tooltip contents, Supported by wordpress tooltips pro plus 23.0.8

Hi, Dear users of wordpress tooltip plugin , hope this message find you are doing well and having happy days with your family 🙂 We got an amazing wordpress tooltip user’s feedback, he asked a question, “How to increase the line spacing between tooltip contents”? We have realized this feature in current wordpress tooltips plugin in a few years before, you can change line height of tooltip content in wordpress tooltip style settings panel, it looks like this:

tooltip style settings panel in tooltips pro plus 18.9.8

tooltip style settings panel in tooltips pro plus 18.9.8

As you can see, in wordpress tooltip style settings panel, there are an option “tooltips line height”, the “line-height” property in CSS does not include the font height itself. Instead, it specifies the height of the line box, which includes the following components:

  1. Text Content Height: This is the actual height of the text content, determined by the font size and any additional spacing due to line breaks within the text.
  2. Leading: Leading refers to the extra space added between lines of text. It is the difference between the line height and the text content height. This space is distributed evenly above and below the text, which helps in vertical alignment and spacing between lines.

So in general,

Line height (line-height) refers to the vertical space occupied by each line of text, including the actual height of the text content (determined by the font size and style) and the leading (space between lines). By adjusting the line height, you can indirectly change the line spacing, as it determines the vertical distance between text lines. A larger line height will result in larger line spacing, while a smaller line height will lead to smaller line spacing.

By adjusting the line height, you can influence the layout and display of text on a page, thus improving readability or achieving specific typographic effects. In web design, adjusting line height is a common way to optimize the appearance and layout of text, making it more in line with design requirements.

But then we understand, what the the user want is, just change line spacing, only change the line spacing, in CSS, “line spacing” refers to the vertical gap between lines of text. It represents the space between adjacent lines of text, controlling the vertical alignment of the text.

In CSS, there are no line-spacing, in general,  line spacing is typically achieved by setting the “line-height” property, which defines the height of the line box, including the actual content height of the text and the line spacing. A larger line height will result in larger line spacing, while a smaller line height will lead to smaller line spacing.

Apart from setting line spacing using the “line-height” property, we can also adjust line spacing using other CSS properties and techniques, such as using “margin” or “padding” properties, or using CSS pseudo-elements to add extra spacing.

Okay, we understand the wordpress tooltip user hope just adjust line spacing, it  is an important typographic technique in web design that can improve text readability, typography, and overall visual aesthetics.

No problem, our wordpress tooltip developer developed a new version wordpress tooltips pro plus 23.0.8 to allow wordpress editor can adjust line spacing 🙂

Thanks for the great suggestion, we upgrade the wordpress tooltip user’s license to wordperss tooltip pro plus, if you have any more feature request about wordpress tooltip plugin, please don’t hesitate to tell us, we are very happy to help you, and we will give you gift as a THANK 🙂

 

Tagged with: , , ,

How to Add Image in Tooltip

Why you need add image in tooltips?

Adding an image to a tooltip can be a visually appealing and useful feature on a website. Tooltips are small, informational pop-ups that appear when a user hovers their mouse over an element on a web page. They typically provide additional context, description, or helpful information about the element.

Here are some reasons why a wordpress webmaster need to add an image to a wordpress tooltip:

Enhanced visual representation: Images can convey information more effectively than text alone. By adding an image to a tooltip, the webmaster can provide a visual representation of the element, making it easier for users to understand its purpose or meaning.

Illustrating complex concepts: In some cases, a concept or idea might be challenging to explain solely with text. An image in a tooltip can help clarify complex concepts and make the information more accessible to users.

Iconography and branding: Including icons or branded images in tooltips can help reinforce the website’s visual identity and improve user recognition and engagement.

Product previews: For e-commerce websites or any site showcasing products, displaying a thumbnail image in a tooltip can give users a quick preview of the product when they hover over its name or description.

Additional context: Images can provide context and enrich the information presented in the tooltip, giving users a better understanding of the element they are interacting with.

Aesthetic appeal: Incorporating images in tooltips can enhance the overall visual design and user experience of the website, making it more engaging and memorable.

How to add image in tooltip?

It is very easy to add image in tooltip via wordpress tooltip plugin:

1:  Download and install wordpress tooltips plugin

2: After activate wordpress tooltips plugin, please click tooltips menu item in wordpress dashboard, and then click add new sub menu item, the wordpress tooltip menu looks like this:

wordpress tooltip menus 14.3.6

wordpress tooltip menus 14.3.6

3: Then you will open wordpress tooltips editor, in here, you can use WYSIWYG wordpress editor to insert text and image, for example, this is the content of our image tooltips demo in wordpress editor:

content of image tooltips demo ‹ WordPress Tooltips Plugin

content of image tooltips demo ‹ WordPress Tooltips Plugin

and then in the front end, when users mouse hover the tooltip term –> image tooltip demo,they will see the images with formatted text in the wordpress tooltip popup window

You can also add more elements in wordpress tooltips editor, not only image, but also including audio tooltip (audio demo),  video tooltip(video demo), QR Code, Google Map, PDF reader…and so on. You can check it wordpress tooltip Try Demo.

It is very easy, right 🙂

How to enable / disable tooltips for images

With wordpress tooltip plugin, you can not only add images in tooltip, you can add tooltips on images too, please check our detailed video Tutorial:

Please check more video tutorial at:

How to add tooltip effect on feature image of wordpress post?

1: login wordpress as admin and click tooltips menu item, click global settings sub menu item

2: now you will open wordpress tooltip global settings panel , the “tooltips global settings panel” looks like this:

wordpress tooltips pro plugin 15.0.2 global settings panel

wordpress tooltips pro plugin 15.0.2 global settings panel, in the current time we are using wordpress tooltips pro plus 22.0.8

3: you will find there are option ” Enable Tooltips for Image? “, please enable it.

4: then  in the option ” Tooltips for Image setting”, please select “use alt attribute in image tag as content of tooltips for image”

5: then when you add a featured image in wordpress post, please add text in the ALT field of the featured image

 

insert tooltip shortcode in alt filed of image

insert tooltip shortcode in alt filed of image

Then in the front end, when mouse hover the featured image in wordpress post, you will find the tooltip text displayed in tooltip popup window

How to add wordpress tooltip to the image on hover

1. Login wordpress admin area,click tooltips menu item, clicking the tab “Global Settings” in WordPress Admin sidebar, access to Global Settings page.
2. You can find the panel “Enalbe/Disable Tooltips for image setting”, you need select “I want to enable tooltips for image” at first.

Enalbe WordPress Tooltip for image setting

Enalbe WordPress Tooltip for image setting

3. Come to the panel below “Tooltips for image Keyword Matching Mode”, You can use ALT attribute, REL attribute and title attribute to add the wordpress tooltip to the image on hover.

Tooltips for image Keyword Matching Mode

WordPress Tooltip plugin for image Keyword Matching Mode

Use ALT attribute in img tag as content of tooltips for image

The option help you display the value of the alt attribute as a wordpress tooltip when mousing over the image. Select the option at first, and then go to post editor, add the ALT attribute to your images, everything is OK.

How to add a ALT attribute to your images?

You need upload an image into your post in post editor at first, after the image is uploaded, edit the image details, input the content in the field of Alternative Text. Now when you mouse over the image, you will see the alt attribute text appearing in the tooltip.

Use REL attribute in image tag as content of tooltips for image

Please note: Many users don’t know how to use rel attribute in newest wordpress gutenberg editor, we have written an guide for this, please check: “Image Tooltip Guide: How to Use “REL” As Image Tooltip Content via WordPress GutenBerg Editor The option help you display the value of the REL attribute as a wordpress tooltip when mousing over the image. Select the option at first, and then go to post editor, add the REL attribute to your images, everything is OK.

How to add a REL attribute to your images?

add a REL attribute to your images

add a REL attribute to your images

You need upload an image into your post in post editor at first, after the image is uploaded, edit the image details, input intro text in the field of link rel. Now when you mouse over the image, you will see the REL text appearing in the tooltip.

Use title attribute in image link as content of tooltiops for image

The option help you display the value of the title attribute as a tooltip when mousing over the image. Select the option at first, and then go to post editor, add the title attribute to your images, everything is OK.

How to add a title attribute to your images?

add a title attribute to your images

add a title attribute to your images

You need upload an image into your post in post editor at first, after the image is uploaded, edit the image details, input intro text in the field of image title attribute. Now when you mouse over the image, you will see the title text appearing in the tooltip. Please check wordpress tooltip for image demo

How to Add Image Tooltip  for WordPress Elementor Page Buidler?

WordPress elementor page builder is a great page builder plugin, Our wordpress tooltip plugin support elementor automatically, if you enter some wordpress tooltips keyword in elementor text editor, our tooltips plugin will scan these text and add tooltips effects on tooltips keyword automatically, also if you are upload an image via elements, if you enter “alt” attribute for the image, our tooltips plugin will use image “alt” attribute as image tooltips automatically

How to Create SVG Image 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: This feature supported by wordpress tooltips pro plus version, 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,

How to Create a WordPress GIF Tooltip?

Please check this GIF tooltip demo:
WordPress GIF Tooltip

It is very easy to build a wordpress GIF tooltip with 2 minutes

1: Login your account in wordpress gif tooltip plugin site: tooltips.org

2: Click “download”  menu item to download wordpress tooltip plugin, it should be a wordpress plugin zip file.

3: Login your wordpress site

4: In wordpress admin area, please click “Plugins” menu

5: If you installed wordpress tooltips free plugin , please deactivate it and delete the old wordpress tooltips free plugin

6: Then in the wordpress “Plugins” panel, please click “add new” link at the top of the plugins panel to install the wordpress gif tooltip plugin which downloaded from tooltips.org

7: Upload the wordpress tooltips plugin zip file which you downloaded from wordpress tooltip glossary plugin site

8: Activate the new wordpress tooltip plugin version which you installed via plugins menu

9: Okay, now please click “Tooltips” menu item

10: Please click “Add New” sub menu item

11: You will open wordpress tooltips editor, which is a standard wordpress custom post type editor

12: Please click “Add Media” button to upload your GIF image in the wordpress tooltip editor

13: Please note, when wordpress editor upload an image via “Add Media” button, then insert it into wordpress posts, by default, wordpress will make a thumbnail image, and insert this thumbnail image into the wordpress post, in general it is not a problem, but when you upload a GIF image,  the thumbnail image will not a really GIF image, that means may be you need use 1second to check the URL of the GIF image in the wordpress tooltip editor, if  you find your gif image URL is something like abc300-300.gif, you can remove 300-300 in the GIF image URL or  just copy your real GIF image url from wordpress media library, and replace this fake thumbnail image with your GIF image URL

14: Add other texts or images or videos or audios… and so on, in wordpress tooltip editor

15: Click “Publish button, and check browser URL, you will find it looks like this:

tooltips.org/wp-admin/post.php?post=3107&action=edit

Copy the number 3107

16: Now try to create a new wordpress posts, just insert a wordpress tooltip shortcode like this way:

Tooltip For Forms Demo - Message Field

3107 is the the number you copied in the step #15

17: In the front end, when mouse hover the GIF tooltip term, you will find a wordpress tooltip pop-up, and GIF is playing in the window

How to add multimedia tooltip to an image using tooltip shortcode

WordPress Tooltip Pro support to add multimedia tooltips to an image, you can insert many different multimedia format elements in the tooltip, which is anything you can hear and see, including text, images, sound, music, film, animation, video, audio recorders, etc.

Let’s try it, when you hover over the image,  a multimedia tooltip appear with a description of the image, you can see a combination of different multimedia content forms, text, link, image, audio and video in the tootlip.


How to use it

We add the multimedia tooltip to an image using tooltip shortcode [tooltips].

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

NOTE:

1. Input the wordpress tootlip shortcode in the wordpress text editor. This editing mode make you write your multimedia tooltip content in HTML.

2. Select the option “Enable Advance Tooltips Shortcode” in “Tooltip Settings for this page, or tooltip shortcode will not work.

Usage example

Usage example 1

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.
  • Demo 1

    The example present video and text in an multimedia tooltip.

    Usage example 2

    Input the wordpress tootlip shortcode in the wordpress text editor.

    [tooltips keyword = "<img src='https://tooltips.org/wp-content/uploads/2018/08/fruit.png' />" content = "<audio controls = 'controls'><source src='https://tooltips.org/wp-content/uploads/2018/08/001.mp3' type='audio/mpeg'>Your browser does not support the audio element.</audio><h3>Multimedia Tooltip"]
    

  • 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.
  • Demo 2

    The example present audio music and text in an multimedia tooltip.

    Usage example 3

    Input the wordpress tootlip shortcode in the wordpress text editor.

    [tooltips keyword = "<img src='https://localhost/wp-content/uploads/2017/02/girl2.gif' />" content = "<img src='https://localhost/wp-content/uploads/2017/02/girl2.gif' /><h3>Multimedia Tooltip</h3><div><a style='text-decoration: underline;' href='https://tooltips.org/'>tooltips Pro </a> support any multimedia content. Hover the trigger, you'll see a tooltip that contains text, image, audio, vedio and much more.</div>"]
    

  • 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.
  • Demo 3

    The example present image, text and link in an multimedia tooltip.

    Conclusion

    wordpress tooltip plugin is a powerful image tooltip tools for wordpress blogger, we have many more tooltips to add image in tooltips, for example, use Bullets Screen to add image in tooltips, use shortcode to add images in tooltips, Add image tooltips for photo gallery, that’s means each of your image in photo gallery can own a dedicated image / video / audio / text / link tooltips….etc

    Here are ten application scenarios of adding images in WordPress tooltips:

    Product Showcase: When hovering over product names or descriptions on an e-commerce website, a thumbnail image of the product can appear in the tooltip, providing users with a quick preview.

    Image Gallery: In a portfolio or image gallery website, tooltips can display larger versions of images when users hover over thumbnails, allowing them to see more details.

    Icon Descriptions: When using icons for various features or services, tooltips can show related images to give users a visual representation of what each icon represents.

    Map Markers: On a map-based website, tooltips can display images associated with specific locations or markers, providing users with additional information or visual context.

    Diagrams and Charts: When explaining complex diagrams or charts, tooltips can include explanatory images to help users better understand the presented data.

    Infographics: To enhance the visual appeal of infographics, tooltips can reveal additional images or details about specific data points or sections.

    Avatar Hovercards: On community or social networking websites, tooltips can show profile pictures (avatars) in a larger size when users hover over usernames.

    Educational Content: In online courses or educational platforms, tooltips can display relevant images when users hover over specific terms or topics, enriching the learning experience.

    Call-to-Action Enhancements: For call-to-action buttons, tooltips can show images related to the action, encouraging users to click or interact with the element.

    Branding and Logos: On corporate websites, tooltips can display logos or brand images when users hover over company names or product names, reinforcing brand recognition.

    Tagged with: , ,

    What’s the reason of wordpress tooltips not always shown and how to avoid it

    Hi, Dear wordpress tooltip plugin users, hope this message find you are doing well and having happy days with your family We got an amazing wordpress tooltip user’s ticket, in which he said wordpress tooltips not always shown, he said:”the issue I have is that tooltips on multiple posts and pages, are shown on same posts and pages, but not on all”. We asked the page URL which have the problem and we found the issue and we feel strange,we was think that is because he have some specific settings in tooltip keyword matching mode option, in wordpress tooltips pro plus, wordpress tooltip plugin support multiple tooltip keyword matching method, for example, only add tooltip effect in the first keyword or first N keyword…etc, also we have many method to disable specific tooltips display in wordpress pages, for example, bulk disable in one time by tooltips id, or in wordpress editor, we have metabox to allow admin to disable specific tooltip in the page…etc, we request the user to do a check and if it is not reason, we requested the user exported wordpress tooltips to csv file via wordpress dashboard >  tooltips menu > export tootips sub menu item, then the amazing user  gave us the tooltip csv file and the post content of the URLs that have the problem. Our wordpress developer checked it carefully, and we found in one page, wordpress tooltip term works well, when mouse hover the tooltip keyword in the page, we can see tooltip window popup with tooltip content, but in another page, the same tooltip keyword did not work, we checked the content of the page that the user copied to us, we found it is because the tooltip term is includes in a shortcode, in wordpress “[” and “]” is using as wordpress shortcode, and we cannot change content in other wordpress shortcode, because that will break other plugins’ work, we reported to the user with details, and we offer our suggestion of solution, the user told us the problem solved and give us a 5.0 ratings. That’s great, our wordpress tooltip developer added a wordpress pro plugin license for the great user as a THANKS , the plugin is AI smart content link, Smart content links is a powerful tool for enhancing your website’s content and improving the user experience. By embedding links to related content within your wordpress blog posts, you can provide valuable context, information, and resources to your readers without disrupting their flow or distracting them from your main message. These smart links are designed to provide readers with quick access to related resources and information, making it easier for them to learn more about the topic at hand.

    Smart content links using AI NLP(Natural Language Processing) to help you build best internal links — it is important to improve your SEO quickly, you can enter a keyword in back-end, Smart content links will ranking posts based on the best match with keywords using AI calculations. Also we are adding new NLP functions for the plugin, for example, page rank…etc 🙂

    The problem solved, actually there are another may be reason that caused tooltips sometimes works in a page, and sometimes did not work on another page: our wordpress tooltip plugin followed wordpress standard to hook “the_content” API. if in your wordpress post, you using a 3rd plugin to generate content and if the 3rd plugin did not followed wordpress standard to return content to the “the_content” API hooks, then all of other plugins cannot get the correct content from that 3rd plugin, in this case, other plugins cannot works with it, include wordpress tooltip plugin. In this case, wordpress tooltip users need tell us the plugin name and we will do a check of their code, if the plugin have a hook, then may be we can hook their private API to add tooltips on their content, else you need use wordpress tooltip shortcode to add tooltip effect in this kind of content that generated by this kind of plugin 🙂

    Thanks for the great feedback, if you have any idea or suggestion, please don’t hesitate to tell us, we are happy to realize it for you and we always give gift as a thanks for wordpress tooltip users 🙂

    Thanks, have a blessed weekend with your family 🙂

    Best Regards,

    WordPress tooltip plugin support

    Tagged with: ,

    Recent Works on WordPress Tooltips Until 2023-07-20

    Hi, Dear  wordpress tooltip plugin users,  hope this message find you are doing well and having happy days  with your family. In recent days, we developed 7 versions of wordpress tooltips plugin, 2 version of AI smart content link with tooltips plugin , 4 wordpress FAQ with tooltips plugin:

    1: we developed 7 versions of wordpress tooltips plugin

    A few wordpress tooltip plugin users using directory module in wordpress tooltip to build their recipe collection directory, news aggregator list, business lists, and they hope we can offer an option to limit the the total number of posts that displayed in wordpress post directory, we realize it in 22.5.8,wordpress tooltips pro 17.0.6,wordpress tooltips free 8.7.9

    Another wordpress tooltip user told us his developer said load multiple jquery-migrate packages is not good, we developed wordpress tooltips pro plus plugin 22.6.8 and pro 17.1.6 to prevent the simultaneous loading of multiple jquery-migrate packages

    And then we released WordPress Tooltips Pro Plus 22.8.8  to solved a conflicts with another wordpress plugin

    A few days before, our wordpress tooltip developer fixed an AJAX Statics Error in WordPress Tooltips Pro Plus 22.9.8 and WordPress Tooltip Pro 17.2.6

    2: we developer 2 version of AI smart content link plugin for wordpress tooltip users

    AI Smart content links plugin is a powerful tool for enhancing your website’s content and improving the user experience. By embedding links to related content within your wordpress blog posts, you can provide valuable context, information, and resources to your readers without disrupting their flow or distracting them from your main message. These smart links are designed to provide readers with quick access to related resources and information, making it easier for them to learn more about the topic at hand.

    In AI smart content link 3.0, our wordpress tooltip plugin developer added  AI NLP(Natural Language Processing) to help wordpress adnub to  build best internal links — it is important to improve your SEO quickly, you can enter a keyword in back-end, Smart content links will ranking posts based on the best match with keywords using AI calculations

    Then in Smart Content Link with Tooltips Pro Plugin 3.1, we start to support  customize font size of AI Smart Content Link, we make a screenshot, it looks like this:

     

    3: We collected feedback of wordpress AI FAQ with tooltips pro plugin, and we realize these suggestions in last week, we released 4 versions of wordpress AI FAQ with tooltips pro plugin:
    In WordPress FAQ with Tooltip Pro Plugin 4.1.6  we support custom FAQ answer background color and FAQ answer font color, FAQ editor can build a better FAQ for users
    Then in WordPress FAQ with Tooltips Plugin 4.2.6, wordpress faq admin can custom F.A.Q active item border color
    In WordPress FAQ with Tooltips 4.3.6, wordpress admin can Custom FAQ Title Font Size
    In WordPress FAQ with Tooltips Pro 4.4.6, wordpress faq editor can Customize WordPress FAQ Content Font Size
    Thanks for the great feedback and suggestions, we give a few wordpress Pro Plugins as a gift to each users who report bug or give us suggestions 🙂
    Best Regards,
    WordPress tooltip Support team
    Tagged with: , , ,

    Fixed an AJAX Statics Error in WordPress Tooltips Pro Plus 22.9.8 and WordPress Tooltip Pro 17.2.6

    Hi, Dear  wordpress tooltip plugin users,  hope this message find you are doing well and having happy days  with your family A wordpress tooltips pro plugin user told us, sometimes the AJAX static hit did not works, we checked his site carefully, finally, we found a settings option have the problem, when enabled this option, the AJAX static hit did not work, we have fixed this problem, please upgrade to latest version of wordpress tooltips pro plus plugin 22.9.8 and wordpress tooltips pro plugin 17.2.6 asap you can 🙂

    As a THANKS, we give the amazing wordpress tooltip user a gift — a license of WordPress FAQ Pro Plugin With WordPress Tooltips plugin, it is a powerful WordPress FAQ plugin, easy to use, select pretty FAQ templates from pre-designed template, custom FAQ style in back-end via a few clicks, support use OpenAI ChatGPT to generate high-quality content for WordPress F.A.Q and wordpress post automatically, support WooCommerce Product FAQ, Responsive FAQ, Multiple FAQ Templates, FAQs grouped by category, specified number of FAQ items for each FAQ… and more and more and more 🙂

    Thanks for the feedback, if you find any bug or if you have any thoughts, we will give you a gift as thanks, if you have any idea, please don’t hesitate to contact us 🙂

    Thanks, have a blessed day with your family 🙂

    Best Regards,

    WordPress tooltip support

    Top