Tooltip card (perfil)

<div class="sc-tip" style="margin-top: 6px;">
                    <button class="sc-btn sc-btn-glass sc-btn-icon" type="button" aria-label="Perfil">
                      <i class="sc-icon" data-smart-icon="user-circle"></i>
                    </button>
                    <div class="sc-tip-panel sc-tip-panel--top" role="dialog" aria-label="Perfil">
                      <div class="sc-card sc-card-outline sc-card-compact" style="margin:0;">
                        <div style="display:flex; align-items:center; gap:10px;">
                          <div class="sc-badge sc-badge-soft">UI</div>
                          <div style="display:grid;">
                            <strong>User</strong>
                            <span class="doc-muted" style="margin:0;">@username</span>
                          </div>
                        </div>
                        <div class="doc-divider" style="margin: 12px 0;"></div>
                        <div style="display:flex; align-items:center; justify-content:space-between; gap:10px;">
                          <span class="doc-muted" style="margin:0;">800+ seguidores</span>
                          <button class="sc-btn sc-btn-primary sc-btn-sm" type="button">Seguir</button>
                        </div>
                      </div>
                    </div>
                  </div>

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin

CSS-first

Dependências

Nenhuma

Desde

0.1.0

• Foco visível e ordem de leitura preservados.
• Rótulos acessíveis devem acompanhar controles sem texto.
• O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.