Temas do tooltip

Esta ferramenta de edição de tema permite que o desenvolvedor altere os temas padrão do TippyJS disponibilizados no Scriptcase. Criar um tema CSS personalizado para o TippyJS permite que você ajuste a aparência das tooltips de acordo com o estilo visual que deseja aplicar, proporcionando maior controle e personalização da interface.

Para acessar o editor de temas, vá em Layout > Temas do tooltip.

Lista de temas

Ao acessar o editor de temas, serão listados os temas existentes, agrupados de acordo com seu escopo.

• Scriptcase: Temas padrão disponibilizados pelo Scriptcase. Esses temas não podem ser editados ou excluídos, mas podem ser copiados para criar novos temas.
• Público: Temas disponíveis para todos os projetos.
• Projeto: Temas disponíveis apenas no projeto atual.

Criação de temas

Os novos temas par ao TippyJS podem ser criados apartir dos temas já existentes no Scriptcase ou criando do zero, clicando no botão Novo.

Cópia de temas (Botão Cópia)

Os temas disponibilizados pelo Scriptcase servem como base para a criação de novos temas. A partir do botão Cópia, exibido ao posicionar o mouse sobre o tema específico, o desenvolvedor poderá criar uma cópia para usar como base na personalização do CSS.

Tema em branco (Botão Novo)

Ao clicar no botão Novo, será aberta a tela de edição com um tema em branco, permitindo que o desenvolvedor crie seu tema do zero.

Não é obrigatório seguir uma estrutura específica para criar um tema no TippyJS. No entanto, manter uma estrutura básica já utilizada pelo componente pode facilitar a aplicação dos estilos e garantir que o TippyJS reconheça corretamente o tema personalizado.

Abaixo, apresentamos um modelo básico de um tema para o TippyJS.

/* Estrutura básica de um tema personalizado para TippyJS */

/* Caixa da tooltip */
.tippy-box[data-theme~="nome-do-tema"] {
  /* Cor de fundo da tooltip */
  background-color: #f0f0f0;

  /* Cor do texto dentro da tooltip */
  color: #333;

  /* Borda arredondada da tooltip */
  border-radius: 6px;

  /* Sombra ao redor da tooltip */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* Fonte e tamanho do texto */
  font-size: 14px;

  /* Espaçamento interno da tooltip */
  padding: 10px;
}

/* Conteúdo da tooltip (o texto ou HTML dentro dela) */
.tippy-box[data-theme~="nome-do-tema"] .tippy-content {
  /* Define o espaçamento do conteúdo */
  padding: 8px 12px;

  /* Estilo da fonte no conteúdo */
  font-family: Arial, sans-serif;
}

/* Personalização da seta (arrow) */
.tippy-box[data-theme~="nome-do-tema"] .tippy-arrow {
  /* Tamanho da seta */
  width: 12px;
  height: 6px;
}

/* Seta quando a tooltip está acima do alvo (top) */
.tippy-box[data-theme~="nome-do-tema"][data-placement^="top"] > .tippy-arrow::before {
  /* Cor da seta para combinar com o fundo da tooltip */
  border-top-color: #f0f0f0;
}

/* Seta quando a tooltip está abaixo do alvo (bottom) */
.tippy-box[data-theme~="nome-do-tema"][data-placement^="bottom"] > .tippy-arrow::before {
  border-bottom-color: #f0f0f0;
}

/* Seta quando a tooltip está à esquerda do alvo (left) */
.tippy-box[data-theme~="nome-do-tema"][data-placement^="left"] > .tippy-arrow::before {
  border-left-color: #f0f0f0;
}

/* Seta quando a tooltip está à direita do alvo (right) */
.tippy-box[data-theme~="nome-do-tema"][data-placement^="right"] > .tippy-arrow::before {
  border-right-color: #f0f0f0;
}

/* Efeito de transição (animação de aparecimento e desaparecimento) */
.tippy-box[data-theme~="nome-do-tema"] {
  /* Transição suave para a opacidade ao mostrar/ocultar a tooltip */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Tooltip quando está visível */
.tippy-box[data-theme~="nome-do-tema"][data-state="visible"] {
  /* Define que a tooltip está completamente visível */
  opacity: 1;
  transform: scale(1);
}

/* Tooltip quando está oculta */
.tippy-box[data-theme~="nome-do-tema"][data-state="hidden"] {
  /* Tooltip parcialmente invisível enquanto oculta */
  opacity: 0;
  transform: scale(0.95); /* Efeito de "shrink" ao desaparecer */
}

Editor de código

Tela de edição do CSS para a criação de um tema do TippyJS

• Modo - Define o escopo onde o tema será salvo. O desenvolvedor deve definir entre:
  • Projeto - Define que o tema criado estará disponível apenas no projeto atual.
  • Público - Define que o tema criado estará disponível em qualquer projeto.
• Nome - Define nome para o novo tema, por padrão, ao copiar um dos temas é adicionado _copy após o nome do tema original.
• Tema - Define o tema do editor de código CSS.
• - Habilita a pesquisa do editor de código.
• - Habilita a opção de replace do editor de código.