top of page

Documentation

Introduction
Tooltips is a Wix Studio plugin that integrates the Tippy.js library, allowing you to add interactive tooltips to elements on your website without writing any code. By utilizing custom CSS classes, this plugin gives users control over the appearance and behavior of tooltips. This guide explains how to use these classes effectively.


Quick Start
1. Install the app from the app market. Add the widget to your page and place it anywhere on the canvas. Delete the text element and set background to transparent if needed.
2. Add class "tooltip-1" to desired element and add another class to specify tooltip position e.g: "top"
3. To edit the tooltip content click the app widget and click "Tooltips Content". Edit the relevant tooltips. To change the tooltip styles click "Tooltips Styles". Publish your site and view your tooltips on the live site!

Available Classes
The plugin provides several classes for customizing your tooltips:
"tooltip-*": The base class for all tooltips (e.g., tooltip-1, tooltip-2, etc.)
"top", "bottom", "left", "right": Specify the tooltip placement
"top-left", "top-right", "bottom-left", "bottom-right", "left-top", "left-bottom", "right-top", "right-bottom": Specify more precise placements.

Note- If a tooltip is placed too close to the page margins the placement will be automatically flipped. 

​​

Editing Tooltip Content

To edit the tooltip content:

  1. Click on the app widget.

  2. Click "Tooltip Content".

  3. In the opened menu, you can edit the text for each of the tooltips you've defined.

The text fields correspond to tooltip classes as follows:

  • "Tooltip #1" text field corresponds to elements with class "tooltip-1"

  • "Tooltip #2" text field corresponds to elements with class "tooltip-2"

  • And so on...
     

Editing Tooltip Styles

To edit tooltip styles:

  1. Click on the app widget.

  2. Click "Tooltip Styles".

  3. Choose the desired text color, background color, and font.
     

Note: These styles are global and will affect all tooltips on your page.
 

Arrow Option

You can choose whether to include an arrow in the tooltips:

  1. In the "Tooltip Styles" menu, find the "Include arrow" option.

  2. Toggle this option on or off as desired.
     

Note: This option is global and will affect all tooltips on the page.

bottom of page