Temas de tooltips

Esta herramienta de edición de temas permite a los desarrolladores modificar los temas predeterminados de TippyJS proporcionados por Scriptcase. Crear un tema CSS personalizado para TippyJS te permite ajustar la apariencia de los tooltips para que coincidan con el estilo visual que deseas aplicar, ofreciendo mayor control y personalización de la interfaz.

Para acceder al editor de temas, ve a Diseño > Temas de tooltips.

Lista de temas

Al acceder al editor de temas, se listarán los temas existentes, agrupados según su alcance.

• Scriptcase: Temas predeterminados proporcionados por Scriptcase. Estos temas no pueden ser editados ni eliminados, pero se pueden copiar para crear nuevos.
• Público: Temas disponibles para todos los proyectos.
• Proyecto: Temas disponibles solo para el proyecto actual.

Creación de temas

Nuevos temas de TippyJS pueden ser creados a partir de los temas existentes en Scriptcase o desde cero haciendo clic en el botón Nuevo.

Copia de temas (Botón Copiar)

Los temas proporcionados por Scriptcase pueden servir como base para crear nuevos temas. Al hacer clic en el botón Copiar, que aparece al pasar el ratón sobre un tema específico, el desarrollador puede crear una copia para utilizarla como base en la personalización del CSS.

Tema en blanco (Botón Nuevo)

Al hacer clic en el botón Nuevo, se abrirá la pantalla de edición con un tema en blanco, lo que permite al desarrollador crear un tema desde cero.

No se requiere una estructura específica para crear un tema de TippyJS. Sin embargo, mantener una estructura básica ya utilizada por el componente puede simplificar la aplicación de estilos y garantizar que TippyJS reconozca correctamente el tema personalizado.

A continuación, se presenta un modelo básico de un tema para TippyJS.

/* Estructura básica de un tema personalizado para TippyJS */

/* Caja del tooltip */
.tippy-box[data-theme~="nombre-del-tema"] {
  /* Color de fondo del tooltip */
  background-color: #f0f0f0;

  /* Color del texto dentro del tooltip */
  color: #333;

  /* Bordes redondeados del tooltip */
  border-radius: 6px;

  /* Sombra alrededor del tooltip */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* Fuente y tamaño del texto */
  font-size: 14px;

  /* Relleno interno del tooltip */
  padding: 10px;
}

/* Contenido del tooltip (el texto o HTML dentro de él) */
.tippy-box[data-theme~="nombre-del-tema"] .tippy-content {
  /* Define el relleno del contenido */
  padding: 8px 12px;

  /* Estilo de la fuente en el contenido */
  font-family: Arial, sans-serif;
}

/* Personalización de la flecha (arrow) */
.tippy-box[data-theme~="nombre-del-tema"] .tippy-arrow {
  /* Tamaño de la flecha */
  width: 12px;
  height: 6px;
}

/* Flecha cuando el tooltip está encima del objetivo (top) */
.tippy-box[data-theme~="nombre-del-tema"][data-placement^="top"] > .tippy-arrow::before {
  /* Color de la flecha para coincidir con el fondo del tooltip */
  border-top-color: #f0f0f0;
}

/* Flecha cuando el tooltip está debajo del objetivo (bottom) */
.tippy-box[data-theme~="nombre-del-tema"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: #f0f0f0;
}

/* Flecha cuando el tooltip está a la izquierda del objetivo (left) */
.tippy-box[data-theme~="nombre-del-tema"][data-placement^="left"] > .tippy-arrow::before {
  border-left-color: #f0f0f0;
}

/* Flecha cuando el tooltip está a la derecha del objetivo (right) */
.tippy-box[data-theme~="nombre-del-tema"][data-placement^="right"] > .tippy-arrow::before {
  border-right-color: #f0f0f0;
}

/* Efecto de transición (animación de aparición y desaparición) */
.tippy-box[data-theme~="nombre-del-tema"] {
  /* Transición suave para la opacidad al mostrar/ocultar el tooltip */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Tooltip cuando está visible */
.tippy-box[data-theme~="nombre-del-tema"][data-state="visible"] {
  /* Define que el tooltip está completamente visible */
  opacity: 1;
  transform: scale(1);
}

/* Tooltip cuando está oculto */
.tippy-box[data-theme~="nombre-del-tema"][data-state="hidden"] {
  /* Tooltip parcialmente invisible mientras está oculto */
  opacity: 0;
  transform: scale(0.95); /* Efecto de "encogimiento" al desaparecer */
}

Editor de código

Pantalla de edición de CSS para crear un tema de TippyJS

• Modo - Define el alcance en el que se guardará el tema. El desarrollador puede elegir entre:
  • Proyecto - El tema creado estará disponible solo en el proyecto actual.
  • Público - El tema creado estará disponible en cualquier proyecto.
• Nombre - Establece el nombre del nuevo tema. De forma predeterminada, al copiar un tema, se agrega _copy después del nombre del tema original.
• Tema - Define el tema del editor de código CSS.
• - Habilita la función de búsqueda del editor de código.
• - Habilita la opción de reemplazo del editor de código.