Tooltip Shortcode

Updated on November 17, 2017

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

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.

Tooltip shortcode - visual composer screen

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

Tooltip shortcode - add element

4When 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

5Configure the settings as required. More settings are explained in the next sections.

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


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.

Did this answer your question?