Tooltip themes

This theme editing tool allows developers to modify the default TippyJS themes provided by Scriptcase. Creating a custom CSS theme for TippyJS lets you adjust the appearance of tooltips to match the visual style you want to apply, offering greater control and customization of the interface.

To access the theme editor, go to Layout > Tooltip Themes.

Theme List

When accessing the theme editor, the existing themes will be listed, grouped according to their scope.

• Scriptcase: Default themes provided by Scriptcase. These themes cannot be edited or deleted but can be copied to create new ones.
• Public: Themes available for all projects.
• Project: Themes available only for the current project.

Creating Themes

New TippyJS themes can be created from existing Scriptcase themes or from scratch by clicking the New button.

Copying Themes (Copy Button)

The themes provided by Scriptcase can serve as a foundation for creating new themes. By clicking the Copy button, which appears when hovering over a specific theme, the developer can create a copy to use as a base for CSS customization.

Blank Theme (New Button)

By clicking the New button, the editing screen will open with a blank theme, allowing the developer to create a theme from scratch.

There is no specific structure required to create a TippyJS theme. However, maintaining a basic structure already used by the component can simplify the application of styles and ensure that TippyJS correctly recognizes the custom theme.

Below is a basic template for a TippyJS theme.

/* Basic structure of a custom TippyJS theme */

/* Tooltip box */
.tippy-box[data-theme~="theme-name"] {
  /* Tooltip background color */
  background-color: #f0f0f0;

  /* Text color inside the tooltip */
  color: #333;

  /* Tooltip rounded corners */
  border-radius: 6px;

  /* Tooltip shadow */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* Font and text size */
  font-size: 14px;

  /* Tooltip padding */
  padding: 10px;
}

/* Tooltip content (the text or HTML inside it) */
.tippy-box[data-theme~="theme-name"] .tippy-content {
  /* Sets content padding */
  padding: 8px 12px;

  /* Font styling for the content */
  font-family: Arial, sans-serif;
}

/* Arrow customization */
.tippy-box[data-theme~="theme-name"] .tippy-arrow {
  /* Arrow size */
  width: 12px;
  height: 6px;
}

/* Arrow when the tooltip is above the target (top) */
.tippy-box[data-theme~="theme-name"][data-placement^="top"] > .tippy-arrow::before {
  /* Arrow color to match the tooltip background */
  border-top-color: #f0f0f0;
}

/* Arrow when the tooltip is below the target (bottom) */
.tippy-box[data-theme~="theme-name"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: #f0f0f0;
}

/* Arrow when the tooltip is to the left of the target (left) */
.tippy-box[data-theme~="theme-name"][data-placement^="left"] > .tippy-arrow::before {
  border-left-color: #f0f0f0;
}

/* Arrow when the tooltip is to the right of the target (right) */
.tippy-box[data-theme~="theme-name"][data-placement^="right"] > .tippy-arrow::before {
  border-right-color: #f0f0f0;
}

/* Transition effect (appearance and disappearance animation) */
.tippy-box[data-theme~="theme-name"] {
  /* Smooth opacity transition when showing/hiding the tooltip */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Tooltip when it is visible */
.tippy-box[data-theme~="theme-name"][data-state="visible"] {
  /* Tooltip is fully visible */
  opacity: 1;
  transform: scale(1);
}

/* Tooltip when it is hidden */
.tippy-box[data-theme~="theme-name"][data-state="hidden"] {
  /* Tooltip is partially invisible while hidden */
  opacity: 0;
  transform: scale(0.95); /* "Shrink" effect when disappearing */
}

Code Editor

CSS editing screen for creating a TippyJS theme

• Mode - Defines the scope in which the theme will be saved. The developer can choose between:
  • Project - The created theme will be available only in the current project.
  • Public - The created theme will be available in any project.
• Name - Sets the name for the new theme. By default, when copying a theme, _copy is added after the original theme’s name.
• Theme - Defines the CSS code editor’s theme.
• - Enables the code editor’s search feature.
• - Enables the code editor’s replace feature.