@wizsolucoes/wiz-tooltip NPM

Wiz solucoes

✨ Wiz Tooltip

Indique o local da página atual em uma hierarquia de navegação que adiciona automaticamente separadores via CSS. Seguindo o design system Sys da Wiz.

Como usar

instala o pacote

npm i @wizsolucoes/wiz-tooltip

Frameworks	Link
Angular	Link
React	Link
Vue	Link

outros

Componente html

  <wiz-tooltip size='md' direction='bottom' bg-color='#2175d6' label-color='#fff' active-border="true">
    <div slot="content"><label for="">loremx99</label></div>
    <div slot="tooltip-text">
      Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
    </div>
  </wiz-tooltip>

Obs: Se estiver trabalhando com algum framework e seus parâmetros forem dinâmicos devem ser feitos em forma diferente dependendo do framwork assista o vídeo abaixo para entender melhor. Web Componentes atributos em framework

🧾 Parâmetros

Parâmetro	Obrigatório	tipagem	Default	Observação
size	Não	string	null	Temos três tamanhos de tooltip (sm, md e lg)
direction	Não	string	null	Temos quatro direções de tooltip (top, bottom, left e right)
bg-color	Não	string	null	Pode ser passado um hexadecilmal ou o nome exemplo('blue', 'red' entre outros);
label-color	Não	string	null	Pode ser passado um hexadecilmal ou o nome exemplo('blue', 'red' entre outros);
active-border	Não	boolean	null	Se quiser utilizar borda basta ativa-la