Home › Posts tagged button tooltip
Tag: button tooltip

Adding Tooltip Effects to Any Button in WordPress: A Complete Guide

Posted on by wordpress tooltips Posted in Wordpress Tooltip Plugin Document — No Comments ↓

How to Implement Tooltip Effects on Buttons in WordPress

Dear wordpress tooltips user, you might be aware that the WordPress Tooltips plugin allows you to add tooltip effects to any WordPress button using its built-in Tooltip For Anything function. Additionally, the WordPress Tooltips plugin is integrated with several predefined tooltip buttons, making it easy to implement. For example, you can check out the demo at ‘How to Enable/Disable Tooltips for Max Buttons in WordPress.‘ Explore these features to enhance user interaction on your site and make your buttons more informative. 🙂

Note to New Users of the WordPress Tooltips Plugin:

Many new users of the WordPress Tooltips plugin may not be aware of its various functions. One of the key features is the ability to easily add tooltip effects to buttons across any section of your WordPress site. For instance, we recently received a ticket from a new user who was unsure how to implement this feature. He said:

Having trouble adding tooltip to header button

Our website  currently has a “Escape | Quitter” button at in the site’s header.

I tried following the instructions found in your site, but no matter what class ID associated with the button I enter in the “Tooltips for Forms” field, every time I finish publishing the changes & refresh the site page, no tooltip shows up.

The tooltip should read:
”
Internet use can be monitored and is impossible to completely erase.If you need to leave this website immediately, click the red “Escape|Quitter” button.

L’utilisation de l’internet peut être surveillée et il estimpossible de l’effacer complètement. Si vous devez quitter ce site immédiatement, cliquez sur le bouton rouge « Escape | Quitter ».
“

Our WordPress tooltip developer has reviewed the ticket, and we believe that there are many other tooltip users who may have similar questions. We are pleased to publish the solution publicly so that more users can easily add tooltips to any buttons across all sections of their WordPress site.

Step-by-Step Guide: Create Tooltip Effects for Buttons in WordPress

We have checked your page and found the following code: <div class=”ast-custom-button”>Escape | Quitter</div> at the top. We replicated your setup on our site using these steps:

1. We created a page titled “Tooltips for Escape | Quitter,” and added the content:
<div class=”ast-custom-button”>Escape | Quitter</div>

2. We created a new tooltip term called ‘test’ and added the content: ‘this is a test.’ In the tooltips for forms metabox, we input: .ast-custom-button.

3. On the front-end, on the “Tooltips for Escape | Quitter” page, when hovering over ‘Escape | Quitter,’ the tooltip appears with the content ‘this is a test,’ and it works well! 🙂

Could you please follow these steps to verify on your end?

The user replied:

Thanks team! Looks good now.

If you’re also facing challenges or have questions about utilizing the tooltip functionalities on your buttons, feel free to reach out for assistance! We’re here to help you make the most of the WordPress Tooltips plugin.

Feel free to share your experiences or ask any questions regarding the implementation of tooltips on your website. 🙂

 

Tagged with: , ,

We have updated guide of WordPress Tooltips For Button

Posted on by wordpress tooltips Posted in Blog, Update — No Comments ↓

Hi Dear WordPress Tooltip Users,

Based on users’ request, we have updated out wordpress button tooltip demo, we addded description of “How to Add Tooltip Effect on WordPress Buttons”, our button tooltip nearly support all buttons on your wordpress site, we show you how to do this via a few clicks, with images and detailed text, also we show you how to support wordpress button tooltip for 3rd wordpress plugins too 🙂

Please check new version of our button tooltip demo and you will find it is very easy to use, thanks for tell us our problem of description of wordpress button tooltip guide, if you think any our wordpress toolip article is not clearly, please tell us, we are happy to add more details for you for help users use wordpress tooltip more easier 🙂

Thanks, have a blessed day with your family 🙂
Best Regards,
WordPress Tooltip Glossary Plugin Support Team
Tagged with: , , ,

How to use wordpress tooltip shortcode [tooltips] to add tooltips manually?

Posted on by Wordpress Tooltips Posted in Wordpress Tooltip Plugin Document — 23 Comments ↓

It is very easy to add wordpress image / video / audio tooltips, form element tooltip… in wordpress automatically or manually via a few clicks, just in one minute. Please check our wordpress tooltip video tutorials at below or Try WordPress Tooltip Demo:

Since wordpress tooltip 4.2.8(current version is 20.9.8, at 2023-05-18), based on user requested, we added a new wordpress tooltip shortcode [tooltips].

In general, you do not need a tooltip shortcode, because wordpress tooltips plugin will add tooltips effect for post’s content/title/tag/excerpt/gallery/menu automatically, based on wordpress standard APIs. By this way, wordpress tooltip plugin will save your time to manage tooltips, for example, when you want to change tooltips content, you will not need to read all posts to find which page has a specified tooltip and change it one by one manually, what you need to do is just editing your tooltips in wordpress standard WYSWYG editor, then tooltip content in all posts will be updated automatically.

Some amazing users told us they want to use tooltip shortcode to add tooltips in wordpress posts, with a lot of reasons, for example: homonym tooltip(homonym tooltip means same word but different meanings); for example, use tooltip shortcode in Divi page builder, elementor page builder, VC page builder… and so on, we are happy to report you that we have built a powerful wordpress tooltip shortcode [tooltips] to help you add pretty tooltip in anywhere 🙂

The wordpress tooltip shortcode [tooltips] is very easy to use:

[tooltips keyword="wordpress tooltips" content="Wordress Tooltips is a rich featured wordpress tooltip plugin. "]

It looks like this: wordpress tooltips

Also you can add image tooltip in wordpress tooltip popup box, for example:

[tooltips keyword="lovely girls" content="<img src='https://mydomain.com/wp-content/uploads/2017/02/screenshot.png'>"]

It looks like this: lovely girls

Our WordPress tooltip short codes support many more amazing features, for example, add video tooltip on an image, use another image as image tooltip for images… and so on:

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 wordpress 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 wordpress tooltip shortcode

We add the wordpress 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 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

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/2023/05/003.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.

    • WordPress Tooltip Shortcode Demo 1: Add Video Tooltip on Image

    The example present video and text in a wordpress multimedia tooltip.

    Usage example 2

    Input the wordpress tootlip shortcode in the wordpress texts 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.

    • WordPress Tooltip Shortcode Demo 2: Add Audio Tooltip on Image

    The example presents audio music and text in a wordpress 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.

    • WordPress Tooltip Shortcode Demo 3: Add Image Tooltip On Another Image

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

    [tooltips] shortcode is a powerful tool, [tooltips] support Self-Closing Shortcode and Enclosing Shortcode, with Enclosing Shortcode, you can use [tooltips] shortcode to add icon tooltip

    How to use WordPress Tooltip Shortcode to Create Icon Tooltip?

    It is very easy to create icon tooltip from wordpress tooltip plugin, Please mouse hover this icon tooltip -> 🙂

    Please check codes:

    [tooltips keyword=’good’ content = ‘you are very welcome!’]:)[/tooltips]

    or

    [tooltips content = ‘you are very welcome!’]:)[/tooltips]

    Both of them will works well, please use your icon replace the “:)”

    Also we offer another method to add icon tooltip more easier, you do not need add your content, you can just use conent from existed tooltip terms, it works like this:

    Please check codes:

    [icon_tooltip_by_id tooltip_id=’308’]your icon here[/icon_tooltip_by_id]

    You can find more icon tooltip demos at:

    [tooltips] shortcode icon tooltip demo

    [icon_tooltip_by_id] shortcode icon tooltip demo

    How to Reference the Content from an Already Existing Tooltips Term in Tooltip Short Code?

    1: Click “Tooltips” menu item, in “All Tooltips” Panel, search the existed tooltip term which you want to reference.

    2: Click Editor button of the tooltip term, it looks like this:

    edit button of tooltip term

    edit button of tooltip term

    3: Then you will open “Edit Tooltip” panel.

    4: In “Edit Tooltip” panel, you will find the tooltip id in browser URL bar, it looks like this:

    find tooltip term which you want to reference

    find tooltip term which you want to reference

    You will find the in the browser URL bar, the URL is: tooltips.org/wp-admin/post.php?post=3107&action=edit&classic-editor, and the tooltip id is 3107.

    5: Now you can insert this tooltip id in your tooltip_by_id shortcode [tooltip_by_id tooltip_id='3107'] in any wordpress page or post

    6: The result looks like this:

    Tooltip For Forms Demo - Message Field
    In the current time, wordpress shortcode mechanism have many flaws yet, by this way, you can easily push the limits of the wordpress shortcode. You can achieve many complex effects in wordpress tooltips standard WYSWYG editor, and then use tooltip_by_id shortcode to reference the content of the tooltip term into any wordpress post or page. 🙂

    About WordPress SVG Icons Tooltips:

    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, SVG is becoming more and more popular, most major browsers already support SVG, but wordpress do not support SVG yet, our wordpress tooltip plugin have an addon, in which we can support WordPress SVG Images Tooltip, you can find detailed step by step wordpress SVG Tooltip document at How to Build a SVG Tooltip?

    Some amazing users told us they want to use our wordpress tooltip in other plugins generated content too, for example add tooltip in tables which generated by table plugins, add tooltip in form plugins, add tooltip in price tables, add tooltip in Divi page builder… and so on, now you can insert wordpress tooltips to pages which is generated by those 3rd plugins very easy, for example, in tablepress plugin, you can add wordpress tooltip shortcode in table title, table cell… and so on, when users mouse hovers the table cell, they can see video, image, audio, text, html links, google map, QR code related with this table cell in tooltip popup box.

    you can find more wordpress shortcode guide at Lists of How to Use WordPress Tooltip Shortcode.

    We are working hard to let WordPress tooltip plugin support more and more famous plugins, for example woocommerce, tablepress, MaxButtons, Easy Pricing Tables… and so on, if you have any feature request for wordpress tooltip plugin, please don’t to hesitate to tell us, we are happy to integrate our wordpress tooltip plugin with famous plugins.

    We are happy to add more amazing wordpress tooltip function for our wordpress tooltips shortcode, any feature request is very welcome. 🙂

    WordPress Tooltip features can be found at features of WordPress Tooltips Plugin . Please check WordPress Tooltip Demos of video tooltip, image tooltip, audio tooltip, tooltip for button, tooltip for title, tooltip for tag, woocommerce tooltip, table tooltip, pricing table tooltip, … Try Demo

    Thanks, have a happy day with your family. 🙂

    WordPress Tooltips Plugin demos:

    Add tooltips in Table Cell

    Add tooltips in Pricing Table

    WordPress Image Tooltips Demo

    WordPress Audio Tooltips Demo

    Add tooltips in wordpress post title

    Add tooltips for your WooCommerce Product

    Add tooltips on Button

    Add wordpress tooltips in wordpress post tag

    Show Tooltips In F.A.Q

    Add wordpress tooltips on tag

    Add wordpress tooltips on title demo

    use Video as wordpress tooltips demo

    Demo of add tooltips manually so you can add many different tooltips content for the same tooltips term

    Have fun!
    Wordpress tooltips plugin team

    Tagged with: , , , , , , , , , , ,

    Tooltips For Button

    Posted on by Wordpress Tooltips Posted in Wordpress Tooltip Plugin Document, Wordpress Tooltips Demo — 2 Comments ↓

    Hi Dear WordPress Tootip Plugin Users,

    WordPress tooltips plugin support add tooltip effects to buttons on wordpress site, for example, in the right hand of this page, you will find the search form in the widget, please mouse hover the button “Go”, you will find the button tooltip popup box, you can add video / audio / image / text / links to tell users how to use the search form. WordPress tooltip plugin by tooltips.org can add tooltip effect to nearly all buttons on your site, and it is very easy to do. 🙂

    How to Add Tooltip Effect on WordPress Buttons

    It is very easy to add button tooltips on your wordpress site:

    #1 Login wordpress admin area

    #2 Click “Tooltips” menu item

    #3 Click “Add New” sub menu item

    #4 In the wordpress tooltip editor, you can add your tooltip title and content in here, also the right of tooltip editor, you will find “Tooltips For Forms” meta box, just enter your button class or id in this metabox, and publish the tooltip, also the title is “tooltips for forms”, but actually this can be used on all elements on your site, for example, form tooltips, element tooltips, button tooltips, table tooltips….and so on, it looks like this:

    #5 How to find class or id of your button? If you use firefox, in front end, you can enter F12, then you will find “Inspector” tab, before “Inspector” tab, there are arrow button, click arrow button and move your mouse in your front end page, move on your button and click it, you will find some codes like <button id=’homepagebuttonname’>… and so on,it looks like this:

    firefox f12 to find button id or class

    firefox f12 to find button id or class

    Just copy id name of the button,  for example in my screenshot, you can see firefox have highlight the search button, the id of search button is “searchsbumit”, so please enter the button id in “Tooltips For Forms” meta box like this: “#searchsbumit”, then in front end, your button will have tooltip effect, just like what I do in my current demo page, if you still not know how to use firefox, search google, firefox F12, inspector, then you will get a lot of guides.

    Also wordpress tooltip plugin by tooltips.org support a few 3rd button plugins, the demo at below will show how wordpress tooltips plugin can add a tooltip on the button generated by MaxButtons plugin, When you hover the button text, you will find a tooltips box popup, and we still keep the function of the button, please try to click the button, you can still go to the linked URLs in the button.

    Button of Product Tooltips

    The shortcode we are using is [maxbutton id="1"]

    Conclusion

    With WordPress Tooltip Plugin by tooltips.org, tooltip users can add tooltip on nearly any buttons on their WordPress site, you can add video / audio / image / text / links / google map / QR Code …. nearly any thing in wordpress button tooltip, with many animation effects, also you can custom color, border, width… nearly all things of tooltip box, to make different tooltip effect for each button, to build a lively, good user experience wordpress site for your users.

    WordPress tooltip plugin by tooltips.org support button tooltip, image tooltip, video tooltip(video demo), Audio Tooltip(audio demo), WooCommerce Tooltips, Pricing Table Tooltip, table tooltip… and buddypress tooltip, bbpress tooltip, ACF tooltip…, please check features of wordpress tooltip for more features, or click to try demo

    Purchase Now

    We are happy to add more pretty functions for the wordpress tooltips plugin, any feature request or question is welcome. 🙂

    Thanks, have a happy day with your family. 🙂

    Best Regards,

    WordPress Tooltip Plugin Support Team

    Tagged with: , , ,
    Top