Helper

O mk-helper ancora uma bolha flutuante a um trigger arbitrário, recebido via slot padrão, exibindo um heading e uma description opcionais. Usa a mesma mecânica de posicionamento do mk-tooltip/mk-popconfirm (Floating UI + Popover API), mas sem o limite de caracteres do tooltip e sem ações embutidas — é puramente informativo.

Padrão

import { MkHelper, MkIcon } from '@db1/makuco-ui-react';

<MkHelper
  heading="Título de apoio"
  description="Um texto mais longo explicando o conceito, sem o limite de caracteres do tooltip."
>
  <MkIcon name="info" />
</MkHelper>

<mk-helper
  heading="Título de apoio"
  description="Um texto mais longo explicando o conceito, sem o limite de caracteres do tooltip."
>
  <mk-icon name="info"></mk-icon>
</mk-helper>

Apenas heading

description é opcional — com apenas heading definido, a bolha exibe só o título.

<MkHelper heading="Título de apoio">
  <MkIcon name="info" />
</MkHelper>

<mk-helper heading="Título de apoio">
  <mk-icon name="info"></mk-icon>
</mk-helper>

Apenas description

Com apenas description definida, a bolha exibe só o texto de apoio, sem título em destaque.

<MkHelper description="Um texto mais longo explicando o conceito, sem o limite de caracteres do tooltip.">
  <MkIcon name="info" />
</MkHelper>

<mk-helper description="Um texto mais longo explicando o conceito, sem o limite de caracteres do tooltip.">
  <mk-icon name="info"></mk-icon>
</mk-helper>

Modo click

Com trigger="click", o clique no trigger alterna a bolha, que permanece aberta até Escape ou clique fora. No modo padrão (trigger="hover"), a bolha fecha ao mover o ponteiro para fora do trigger e da própria bolha.

<MkHelper heading="Título de apoio" description="Clique para abrir e fechar." trigger="click">
  <MkIcon name="info" />
</MkHelper>

<mk-helper heading="Título de apoio" description="Clique para abrir e fechar." trigger="click">
  <mk-icon name="info"></mk-icon>
</mk-helper>

Desabilitado

disabled impede a abertura da bolha por qualquer gatilho. Se setado enquanto a bolha já está aberta, o componente força o fechamento imediato.

<MkHelper heading="Título de apoio" description="Texto de apoio." disabled>
  <MkIcon name="info" />
</MkHelper>

<mk-helper heading="Título de apoio" description="Texto de apoio." disabled>
  <mk-icon name="info"></mk-icon>
</mk-helper>

Posicionamento

Use placement para escolher entre os 8 valores padrão do Makuco, o mesmo vocabulário do mk-tooltip/mk-popconfirm: top-left, top-center, top-right, right, left, bottom-left, bottom-center e bottom-right. A posição é resolvida via @floating-ui/dom, com flip/shift mantendo a bolha dentro da viewport.

<MkHelper heading="Título de apoio" placement="right">
  <MkIcon name="info" />
</MkHelper>

<mk-helper heading="Título de apoio" placement="right">
  <mk-icon name="info"></mk-icon>
</mk-helper>

Props — mk-helper

Eventos

Slots

Acessibilidade

• A bolha renderiza com role="tooltip"; o trigger reflete aria-describedby apontando para o id da bolha, sempre presente.
• aria-disabled="true" no trigger quando disabled.
• aria-expanded no trigger apenas quando trigger="click", sincronizado com open.
• Hoverable: o ponteiro pode se mover do trigger para dentro da bolha sem fechá-la (WCAG 1.4.13 — Content on Hover or Focus).
• Dismissível via Escape e clique fora, em ambos os modos de trigger.
• Sem heading e sem description, a bolha não é renderizada por nenhum gatilho, mesmo com open={true} definido externamente.