UI Power Pack — Tooltip

[Título da Informação]

[Descrição detalhada que explica o contexto deste dado ou métrica específica.]


        <div style="background: #1F2937; color: white; padding: 10px 15px; border-radius: 8px; font-size: 13px; font-weight: 500; max-width: 250px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
          <div style="font-weight: 600; margin-bottom: 5px;">[Título da Informação]</div>
          <div>[Descrição detalhada que explica o contexto deste dado ou métrica específica.]</div>
        </div>


        TooltipHTML = 
        "
        <div style='background: #1F2937; color: white; padding: 10px 15px; border-radius: 8px; font-size: 13px; font-weight: 500; max-width: 250px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);'>
          <div style='font-weight: 600; margin-bottom: 5px;'>[Título da Informação]</div>
          <div>[Descrição detalhada que explica o contexto deste dado ou métrica específica.]</div>
        </div>
        "

Criado por Davi Marques

❓

[Como interpretar este dado?]

[Este valor representa a média móvel dos últimos 30 dias.]


                    <div style="background: #0078D4; color: white; padding: 12px 16px; border-radius: 8px; font-size: 13px; max-width: 280px; box-shadow: 0 4px 16px rgba(0,120,212,0.4);">
                      <div style="display: flex; align-items: start; gap: 10px;">
                        <span style="font-size: 20px; flex-shrink: 0;">❓</span>
                        <div>
                          <div style="font-weight: 700; margin-bottom: 6px;">[Como interpretar este dado?]</div>
                          <div style="font-weight: 400; line-height: 1.4;">[Este valor representa a média móvel dos últimos 30 dias.]</div>
                        </div>
                      </div>
                    </div>


        TooltipHTML =
        "
        <div style='background: #0078D4; color: white; padding: 12px 16px; border-radius: 8px; font-size: 13px; max-width: 280px; box-shadow: 0 4px 16px rgba(0,120,212,0.4);'>
        <div style='display: flex; align-items: start; gap: 10px;'>
          <span style='font-size: 20px; flex-shrink: 0;'>❓</span>
          <div>
            <div style='font-weight: 700; margin-bottom: 6px;'>[Como interpretar este dado?]</div>
            <div style='font-weight: 400; line-height: 1.4;'>[Este valor representa a média móvel dos últimos 30 dias.]</div>
          </div>
        </div>
      </div>
        "

Criado por Davi Marques

[Componentes do Cálculo:]

• [Receita Bruta]
• [Deduções]
• [Impostos]
• [Custos Operacionais]


                    <div style="background: white; border: 2px solid #0078D4; color: #1F2937; padding: 12px 16px; border-radius: 8px; font-size: 13px; max-width: 300px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);">
  <div style="font-weight: 700; color: #0078D4; margin-bottom: 8px;">[Componentes do Cálculo:]</div>
  <div style="line-height: 1.6;">
    • [Receita Bruta]<br>
    • [Deduções]<br>
    • [Impostos]<br>
    • [Custos Operacionais]
  </div>
</div>


        TooltipHTML =
        "
        <div style='background: white; border: 2px solid #0078D4; color: #1F2937; padding: 12px 16px; border-radius: 8px; font-size: 13px; max-width: 300px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);'>
  <div style='font-weight: 700; color: #0078D4; margin-bottom: 8px;'>[Componentes do Cálculo:]</div>
  <div style='line-height: 1.6;'>
    • [Receita Bruta]<br>
    • [Deduções]<br>
    • [Impostos]<br>
    • [Custos Operacionais]
  </div>
</div>
        "

Criado por Davi Marques

[Detalhes da Métrica]

[Valor Atual:] [R$ 125.450]

[Variação:] +12.5%


                    <div style="background: linear-gradient(135deg, #0078D4, #005A9E); color: white; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 260px; box-shadow: 0 6px 20px rgba(0,120,212,0.3);">
  <div style="font-weight: 600; margin-bottom: 8px; font-size: 14px;">[Detalhes da Métrica]</div>
  <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
    <span>[Valor Atual:]</span>
    <span style="font-weight: 700;">[R$ 125.450]</span>
  </div>
  <div style="display: flex; justify-content: space-between;">
    <span>[Variação:]</span>
    <span style="font-weight: 700; color: #86EFAC;">+12.5%</span>
  </div>
</div>


        TooltipHTML =
        "
        <div style='background: linear-gradient(135deg, #0078D4, #005A9E); color: white; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 260px; box-shadow: 0 6px 20px rgba(0,120,212,0.3);'>
  <div style='font-weight: 600; margin-bottom: 8px; font-size: 14px;'>[Detalhes da Métrica]</div>
  <div style='display: flex; justify-content: space-between; margin-bottom: 4px;'>
    <span>[Valor Atual:]</span>
    <span style='font-weight: 700;'>[R$ 125.450]</span>
  </div>
  <div style='display: flex; justify-content: space-between;'>
    <span>[Variação:]</span>
    <span style='font-weight: 700; color: #86EFAC;'>+12.5%</span>
  </div>
</div>
        "

Criado por Davi Marques

[Comparativo]

[Período Atual:] [R$ 250.000]

[Período Anterior:] [R$ 200.000]

[↑ Crescimento de 25%]


                   <div style="background: #1F2937; color: white; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);">
  <div style="font-weight: 700; margin-bottom: 10px; font-size: 14px;">[Comparativo]</div>
  <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.1); border-radius: 6px; margin-bottom: 6px;">
    <span>[Período Atual:]</span>
    <span style="font-weight: 700; color: #86EFAC;">[R$ 250.000]</span>
  </div>
  <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.05); border-radius: 6px;">
    <span>[Período Anterior:]</span>
    <span style="font-weight: 700;">[R$ 200.000]</span>
  </div>
  <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); text-align: center; font-weight: 600; color: #86EFAC;">
    [↑ Crescimento de 25%]
  </div>
</div>


        TooltipHTML =
        "
        <div style='background: #1F2937; color: white; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);'>
  <div style='font-weight: 700; margin-bottom: 10px; font-size: 14px;'>[Comparativo]</div>
  <div style='display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.1); border-radius: 6px; margin-bottom: 6px;'>
    <span>[Período Atual:]</span>
    <span style='font-weight: 700; color: #86EFAC;'>[R$ 250.000]</span>
  </div>
  <div style='display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,0.05); border-radius: 6px;'>
    <span>[Período Anterior:]</span>
    <span style='font-weight: 700;'>[R$ 200.000]</span>
  </div>
  <div style='margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2); text-align: center; font-weight: 600; color: #86EFAC;'>
    [↑ Crescimento de 25%]
  </div>
</div>
        "

Criado por Davi Marques

[Fórmula de Cálculo]

                    [Resultado = (Valor A + Valor B) / Total]
                  

[Esta métrica considera todos os valores válidos do período selecionado.]


                   <div style="background: #EEF2FF; border-left: 4px solid #6366F1; color: #1F2937; padding: 14px 18px; border-radius: 8px; font-size: 13px; max-width: 320px; box-shadow: 0 4px 12px rgba(99,102,241,0.2);">
  <div style="font-weight: 700; color: #6366F1; margin-bottom: 8px;">[Fórmula de Cálculo]</div>
  <div style="background: white; padding: 10px; border-radius: 6px; font-family: monospace; margin-bottom: 8px; color: #4B5563;">
    [Resultado = (Valor A + Valor B) / Total]
  </div>
  <div style="font-size: 12px; color: #6B7280; line-height: 1.4;">
    [Esta métrica considera todos os valores válidos do período selecionado.]
  </div>
</div>


        TooltipHTML =
        "
        <div style="background: #EEF2FF; border-left: 4px solid #6366F1; color: #1F2937; padding: 14px 18px; border-radius: 8px; font-size: 13px; max-width: 320px; box-shadow: 0 4px 12px rgba(99,102,241,0.2);">
  <div style="font-weight: 700; color: #6366F1; margin-bottom: 8px;">[Fórmula de Cálculo]</div>
  <div style="background: white; padding: 10px; border-radius: 6px; font-family: monospace; margin-bottom: 8px; color: #4B5563;">
    [Resultado = (Valor A + Valor B) / Total]
  </div>
  <div style="font-size: 12px; color: #6B7280; line-height: 1.4;">
    [Esta métrica considera todos os valores válidos do período selecionado.]
  </div>
</div>
        "

Criado por Davi Marques

💰 [Controle de Orçamento]

Orçado: R$ 500.000

Gasto: R$ 425.000

Disponível: R$ 75.000

85% utilizado


                   <div style="background: #1F2937; color: white; padding: 16px 20px; border-radius: 10px; font-size: 13px; max-width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);">
  <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
    <span style="font-size: 24px;">💰</span>
    <span style="font-weight: 700; font-size: 14px;">[Controle de Orçamento]</span>
  </div>
  <div style="margin-bottom: 12px;">
    <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
      <span>Orçado:</span>
      <span style="font-weight: 700;">R$ 500.000</span>
    </div>
    <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
      <span>Gasto:</span>
      <span style="font-weight: 700; color: #FDB813;">R$ 425.000</span>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <span>Disponível:</span>
      <span style="font-weight: 700; color: #10B981;">R$ 75.000</span>
    </div>
  </div>
  <div style="background: rgba(255,255,255,0.1); height: 6px; border-radius: 3px; overflow: hidden;">
    <div style="background: #FDB813; width: 85%; height: 100%;"></div>
  </div>
  <div style="text-align: center; margin-top: 8px; font-size: 12px; opacity: 0.8;">85% utilizado</div>
</div>


        TooltipHTML =
        "
        <div style='background: #1F2937; color: white; padding: 16px 20px; border-radius: 10px; font-size: 13px; max-width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);'>
  <div style='display: flex; align-items: center; gap: 10px; margin-bottom: 12px;'>
    <span style='font-size: 24px;'>💰</span>
    <span style='font-weight: 700; font-size: 14px;'>[Controle de Orçamento]</span>
  </div>
  <div style='margin-bottom: 12px;'>
    <div style='display: flex; justify-content: space-between; margin-bottom: 6px;'>
      <span>Orçado:</span>
      <span style='font-weight: 700;'>R$ 500.000</span>
    </div>
    <div style='display: flex; justify-content: space-between; margin-bottom: 6px;'>
      <span>Gasto:</span>
      <span style='font-weight: 700; color: #FDB813;'>R$ 425.000</span>
    </div>
    <div style='display: flex; justify-content: space-between;'>
      <span>Disponível:</span>
      <span style='font-weight: 700; color: #10B981;'>R$ 75.000</span>
    </div>
  </div>
  <div style='background: rgba(255,255,255,0.1); height: 6px; border-radius: 3px; overflow: hidden;'>
    <div style='background: #FDB813; width: 85%; height: 100%;'></div>
  </div>
  <div style='text-align: center; margin-top: 8px; font-size: 12px; opacity: 0.8;'>85% utilizado</div>
</div>
        "

Criado por Davi Marques

[SLA - Nível de Serviço]

Meta SLA: 95%

Atingido: 97.5%

✓ Meta superada!

Excelente performance da equipe


                  <div style="background: white; border: 2px solid #10B981; color: #1F2937; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 300px; box-shadow: 0 4px 16px rgba(16,185,129,0.2);">
                  <div style="font-weight: 700; color: #10B981; margin-bottom: 12px; font-size: 14px;">[SLA - Nível de Serviço]</div>
                  <div style="margin-bottom: 12px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                      <span>Meta SLA:</span>
                      <span style="font-weight: 700;">95%</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                      <span>Atingido:</span>
                      <span style="font-weight: 700; color: #10B981;">97.5%</span>
                    </div>
                  </div>
                  <div style="background: #F0FDF4; padding: 10px; border-radius: 6px; border-left: 3px solid #10B981;">
                    <div style="font-weight: 600; color: #10B981; font-size: 12px;">✓ Meta superada!</div>
                    <div style="font-size: 11px; color: #6B7280; margin-top: 4px;">Excelente performance da equipe</div>
                  </div>
                </div>


        TooltipHTML =
        "
        <div style='background: white; border: 2px solid #10B981; color: #1F2937; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 300px; box-shadow: 0 4px 16px rgba(16,185,129,0.2);'>
  <div style='font-weight: 700; color: #10B981; margin-bottom: 12px; font-size: 14px;'>[SLA - Nível de Serviço]</div>
  <div style='margin-bottom: 12px;'>
    <div style='display: flex; justify-content: space-between; margin-bottom: 8px;'>
      <span>Meta SLA:</span>
      <span style='font-weight: 700;'>95%</span>
    </div>
    <div style='display: flex; justify-content: space-between; margin-bottom: 8px;'>
      <span>Atingido:</span>
      <span style='font-weight: 700; color: #10B981;'>97.5%</span>
    </div>
  </div>
  <div style='background: #F0FDF4; padding: 10px; border-radius: 6px; border-left: 3px solid #10B981;'>
    <div style='font-weight: 600; color: #10B981; font-size: 12px;'>✓ Meta superada!</div>
    <div style='font-size: 11px; color: #6B7280; margin-top: 4px;'>Excelente performance da equipe</div>
  </div>
</div>
        "

Criado por Davi Marques

📦 [Status do Estoque]

Disponível: 2.450 un

Reservado: 380 un

Em Falta: 12 un


                  <div style="background: #1F2937; color: white; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 300px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);">
                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
                      <span style="font-size: 24px;">📦</span>
                      <span style="font-weight: 700; font-size: 14px;">[Status do Estoque]</span>
                    </div>
                    <div style="margin-bottom: 10px;">
                      <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(16,185,129,0.2); border-radius: 6px; margin-bottom: 6px;">
                        <span>Disponível:</span>
                        <span style="font-weight: 700; color: #86EFAC;">2.450 un</span>
                      </div>
                      <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(253,184,19,0.2); border-radius: 6px; margin-bottom: 6px;">
                        <span>Reservado:</span>
                        <span style="font-weight: 700; color: #FDB813;">380 un</span>
                      </div>
                      <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(239,68,68,0.2); border-radius: 6px;">
                        <span>Em Falta:</span>
                        <span style="font-weight: 700; color: #FCA5A5;">12 un</span>
                      </div>
                    </div>
                  </div>


        TooltipHTML =
        "
        <div style="background: #1F2937; color: white; padding: 14px 18px; border-radius: 10px; font-size: 13px; max-width: 300px; box-shadow: 0 6px 20px rgba(0,0,0,0.4);">
  <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
    <span style="font-size: 24px;">📦</span>
    <span style="font-weight: 700; font-size: 14px;">[Status do Estoque]</span>
  </div>
  <div style="margin-bottom: 10px;">
    <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(16,185,129,0.2); border-radius: 6px; margin-bottom: 6px;">
      <span>Disponível:</span>
      <span style="font-weight: 700; color: #86EFAC;">2.450 un</span>
    </div>
    <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(253,184,19,0.2); border-radius: 6px; margin-bottom: 6px;">
      <span>Reservado:</span>
      <span style="font-weight: 700; color: #FDB813;">380 un</span>
    </div>
    <div style="display: flex; justify-content: space-between; padding: 8px; background: rgba(239,68,68,0.2); border-radius: 6px;">
      <span>Em Falta:</span>
      <span style="font-weight: 700; color: #FCA5A5;">12 un</span>
    </div>
  </div>
</div>
        "

Criado por Davi Marques

Visuais HTML para Power BI