How to link tooltip to an element on the page?

[Sean]

Hi,

Apologies, newbie here. I still can’t figure out how to link or associate a tooltip to a given element. So I’ve created a tooltip and say I want this to appear when the user hovers over a button element (with the label “Add Person” and id = “add-person”)on my page. How do I go about this? That is, how do I associate the tooltip I just created with this button element?

[team]

Hi @sean-bernardino,

I hope this message find you are doing well and have happy weekend with your family

Thanks for the message , we are very happy to help you

How to link or associate wordpress tooltip to a given element?

1. Please create a new wordpress tooltip term, in wordpress dashboard, you can click on the “Add New” submenu item to open the Tooltips Creator. The interface will resemble the tooltips editor shown below:

 

tooltips editor

2. In the above diagram, you’ll notice a metabox labeled “Tooltips for Forms.” However, it should actually be titled “Tooltips for Classes.” We made this change because we observed that the most common use cases involved adding tooltips to form elements or fields using CSS classes or IDs. This alteration is intended to help users understand the metabox purpose as tooltips for forms.

3. Simply enter the CSS class or CSS ID in the “Tooltip for Forms” input box where you want to apply the tooltip effect:

For example, tooltips for class:
.input_box_1
or tooltips for ID:
#text_box_2

If you’re unsure how to find the CSS Class or CSS ID for a specific component in WordPress, please refer to the guide titled “How to Find a CSS Class or CSS ID of a Component in WordPress Page?“

4. Make sure you’ve entered the tooltip title and content in the tooltips editor, then click the “Publish” button.

5. On the frontend, when you visit a page that contains the specified CSS class or CSS ID, hovering over the class element will trigger the display of the tooltip content in a tooltip window.

6. Here to check  tooltips for class DEMO , you can see a demonstration of wordpress tooltips for classes. In the form, as you hover over each field, a dedicated tooltip window will appear. This way, you can add tooltips for various CSS classes or IDs on the frontend. For instance, you can have tooltips for contact forms, images, videos, buttons, menu items, maps, text, and more.

7. Please note that within the tooltip editor, you can customize unique and visually appealing tooltip styles for each tooltip term. Additionally, you can apply different animations for individual tooltips.

Hope this have a little help

Thanks, have a blessed weekend with your family

Best Regards,
Wordpress tooltip plugin support

[Author]

Posts