I just bought your plugin because I need it with classes. But I’ve seen that instead of choosing classes I can only EXCLUDE classes.
1: Login your account at wordpress tooltip plugin site
1: 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: You will find “Download” link at top menu bar, or just click this link — wordpress glossary tooltip plugin to download your wordpress tooltips pro plugin 🙂
3: Login your wordpress site admin area
4: Click “Plugins” menu item
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, it looks like this:
tooltips menu items
11: Click “Add new” sub menu item, you will open Tooltips Creator, it looks like this:
tooltips editor
12: In the above diagram, you can see that we have a metabox “Tooltips for Forms”, actually the title should be Tooltips for Classes, but we found, the most common application scenarios are add tooltips on form’s elements / form’s fields by css class or css ID, for help users understand the metabox, we changed the tootlips for class as tooltips for forms 🙂
13: Please just enter your css class or css id, which you hope adding a tooltip effects in the ” Tooltip For Forms ” input box, if you do not know how to find CSS Class or CSS Id for component in wordpress, please read How to find a css Class or css ID of component in wordpress page?
for example, tooltips for class:
.input_box_1
or tooltips for id
#text_box_2
14: Please ensure you have typed tooltips title and tooltips content in tooltips editor, then click “Publish” button
15: In front end, if you open the page which have the css class or css ID, when you mouse hover the class element, you will find the tooltip content pop-up in tooltip window
16: In here, you can find a tooltips for class DEMO. In the form, when you mouse hover any field, you will find a dedicated tooltip window pop-up, by this way, you can add tooltips for any css or id in the front end, for example: tooltip for contact form, tooltip for image, tooltip for video, tooltip for buttons, menu items, maps, text…. and so on
How to find a css Class or css ID of component in wordpress page?
This section copied come from our document: How to Disable WordPress Tooltips In Menus?
Okay, let’s say if you using the browser firefox to view your wordpress post,a official document from firefox can be found at: Debugging CSS , please use a few minutes to read it, then:
5.1 please enter F12, then select “Inspector” tab at the bottom of the firefox browser
5.2 then press CTRL+SHIFT+C
5.3 move mouse to over any component in your wordpress post, you will find you can get all HTML code and CSS Class / ID of any element in your wordpress page.
For example,in our home page of wordpress tooltip plugin site, there are a menu item “menu tooltips demo”, when you mouse hover the menu item, you will find a rotate tooltip window pop up, let’s try to disable tooltip effect on menu:
enter f12, enter CTRL + SHIFT + C, move mouse to the menu item “menu tooltip demo” and click the menu item, you will find in the firefox “Inspector” tab, you can see HTML codes of this menu component, you will find HTML looks like this:
<li id=”menu-item-5454″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-5454″><a href=”https://tooltips.org/product/tooltips-pro-mutil-site-license/”><span class=”tooltipsall tooltip_post_id_310 classtoolTips310″ data-hasqtip=”13″ aria-describedby=”qtip-13″>Menu Tooltips Demo</span><script type=”text/javascript”>jQuery(“document”).ready(function(){ var tt_store_content = “Enjoy\!”; toolTips(‘.classtoolTips310′,tt_store_content,’310’); });</script></a></li>
In here, what we need is the code:
<li id=”menu-item-5454″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-5454″>
You can use CSS Class “menu-item” to disable tooltips effect for all menu items, or use CSS ID “menu-item-5454” to disable tooltip effect for this menu item “menus tooltip demo”, and keep tooltip effect displayed on other menu items yet 🙂
In our course, we just want to disable tooltip effect on the menu item “menus tooltip demo”, so we can use use CSS ID “menu-item-5454” to stop tooltip effect on this menu item by this way:
5.4 open wordpress tooltip optional settings panel, and in the option: “Disable Tooltips for Selected Classes and IDs”, enter the CSS ID #menu-item-5454 in the input box, it looks like this:
Disable Tooltips for Selected ID of component in wordpress page
5.5 Click update now blue button, then in front end, tooltip effects will be removed from then menu item “menus tooltip demo”, I’d like offer before / after screenshot for you:
Before
enabled tooltip effect on wordpress menu item
After
disabled tooltip effect on wordpress menu item
———————————————————————————————————————
A detailed step by step document for build tooltips on contact form 7 can be found at here:
How to Create WordPress Tooltip for Contact Form 7?
A tooltips for anything demo:
Leave a Reply