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.
Displaying the Tooltip Shortcode
To add the shortcode:
1Add a new page or edit an existing page.
2From the Visual Composer screen, click on the + button.
3In the Add Element pop-up screen, search for Tooltip and click on it to be added to the page.
4When the shortcode is added, a new pop-up screen called Tooltip Setting will open that allows you to configure the shortcode settings.
5Configure the settings as required. More settings are explained in the next sections.
| Setting | Description |
|---|---|
| Text | Adds the inline text to the page. |
6Click 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
| Setting | Description |
|---|---|
| Tooltip Text | Adds the tooltip text which will be shown when hovering over the inline text. |
| Tooltip URL | Adds 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.
