Tooltip Shortcode

Last Updated on

The tooltip shortcode is a Jupiter shortcodes that allows you to add tooltips to inline texts on your page.

In this article, we’ll explain how to configure the tooltip shortcode.

To see the tooltip shortcode in action, check out the demo page.

Tooltip shortcode - demo

In this article


Displaying the Tooltip Shortcode

To add the shortcode:

1
Add a new page or edit an existing page.
2
From the Visual Composer screen, click on the + button.

Tooltip shortcode - visual composer screen

3
In the Add Element pop-up screen, search for Tooltip and click on it to be added to the page.

Tooltip shortcode - add element

4
When the shortcode is added, a new pop-up screen called Tooltip Setting will open that allows you to configure the shortcode settings.

Tooltip shortcode - Tooltip settings

5
Configure the settings as required. More settings are explained in the next sections.
SettingDescription
TextAdds the inline text to the page.
6
Click on Save Changes and publish or update the page to check the result.

Configuring Tooltip Settings

After you added the tooltip shortcode, a pop-up window will appear where you can set its options. Below is a detailed description of each option for tooltip shortcode.

Adding Tooltip

SettingDescription
Tooltip Text Adds the tooltip text which will be shown when hovering over the inline text.
Tooltip URLAdds a URL for the text if you want to link the tooltip text to a webpage.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket