Violin.css

Tip: Bottom Right 

<i class="material-icons inv-tip inv-tip--bottom-right" data-tooltip="Valida o IMEI ao realizar o login pelo celular. O sistema irá permitir que o usuário acesse o sistema através de um celular com o IMEI diferente do especificado. Essa validação só será realizada caso tenha sido configurada nas permissões do Perfil de Acesso. Para permitir que o usuário acesse de outro aparelho basta limpar o campo.">
    info_outline
</i>
 
<i class="material-icons inv-tip {{ tip.modifier }}" data-tooltip="{{ tip.text }}">
  info_outline
</i>
 
{
  "tip": {
    "modifier": "inv-tip--bottom-right",
    "text": "Valida o IMEI ao realizar o login pelo celular. O sistema irá permitir que o usuário acesse o sistema através de um celular com o IMEI diferente do especificado. Essa validação só será realizada caso tenha sido configurada nas permissões do Perfil de Acesso. Para permitir que o usuário acesse de outro aparelho basta limpar o campo."
  }
}
  • Content: 
    .inv-tip {
  --tooltip-arrow-border: 12px;
  --tooltip-arrow-spacing: 12px;
  --tooltip-bottom-horizontal-spacing: 24px;
  --tooltip-bottom-vertical-spacing: 35px;
  --tooltip-top-vertical-spacing: -12px;
  --tooltip-top-left-horizontal-spacing: 48px;
  --tooltip-top-right-horizontal-spacing: -24px;

  position: relative;
  color: var(--color-default--regular);
}

.inv-tip::before {
  position: absolute;
  content: attr(data-tooltip);
  width: max-content;
  max-width: 320px;
  white-space: normal;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 19px;
  color: var(--color-system--white);
  background-color: var(--color-system--dark);
  border-radius: 12px;
  box-shadow: var(--shadow-16) var(--color-default--shadow);
  padding: 16px;
  z-index: var(--z-index-5);
  opacity: 0;
  transition: opacity 0.5s;
  visibility: hidden;
}

.inv-tip::after {
  content: '';
  position: absolute;
  border-left: solid var(--tooltip-arrow-border) transparent;
  border-right: solid var(--tooltip-arrow-border) transparent;
  z-index: var(--z-index-5);
  opacity: 0;
  transition: opacity 0.5s;
  visibility: hidden;
}

.inv-tip--bottom-right::before {
  top: var(--tooltip-bottom-vertical-spacing);
  left: calc(-1 * var(--tooltip-bottom-horizontal-spacing));
}

.inv-tip--bottom-right::after {
  left: 0;
  top: var(--tooltip-arrow-spacing);
  border-top: solid var(--tooltip-arrow-border) transparent;
  border-bottom: solid var(--tooltip-arrow-border) var(--color-system--dark);
}

.inv-tip--bottom-left::before {
  top: var(--tooltip-bottom-vertical-spacing);
  left: calc(var(--tooltip-bottom-horizontal-spacing) * 2);
  transform: translateX(-100%);
}

.inv-tip--bottom-left::after {
  left: 0;
  top: var(--tooltip-arrow-spacing);
  border-top: solid var(--tooltip-arrow-border) transparent;
  border-bottom: solid var(--tooltip-arrow-border) var(--color-system--dark);
}

.inv-tip--top-right::before {
  top: var(--tooltip-top-vertical-spacing);
  left: var(--tooltip-top-right-horizontal-spacing);
  transform: translateY(-100%);
}

.inv-tip--top-right::after {
  left: 0;
  top: calc(-1 * var(--tooltip-arrow-spacing));
  border-top: solid var(--tooltip-arrow-border) var(--color-system--dark);
  border-bottom: solid var(--tooltip-arrow-border) transparent;
}

.inv-tip--top-left::before {
  top: var(--tooltip-top-vertical-spacing);
  left: var(--tooltip-top-left-horizontal-spacing);
  transform: translateY(-100%) translateX(-100%);
}

.inv-tip--top-left::after {
  left: 0;
  top: calc(-1 * var(--tooltip-arrow-spacing));
  border-top: solid var(--tooltip-arrow-border) var(--color-system--dark);
  border-bottom: solid var(--tooltip-arrow-border) transparent;
}

.inv-tip:hover {
  cursor: default;
  color: var(--color-primary--regular);
}

.inv-tip:hover::before,
.inv-tip:hover::after {
  opacity: 1;
  visibility: visible;
}
  • URL: /components/raw/tip/tip.css
  • Filesystem Path: src/components/tip/tip.css
  • Size: 2.9 KB

Tip

Tooltip com texto para auxiliar o usuário com informações relevantes.

Possui a classe base .inv-tip, deve sempre utilizar uma classe modificadora e de preferência em ícones <i></i> ou span <span></span>.

Modificadores

Modificadores Uso
.inv-tip--bottom-left Posiciona o tooltip na parte inferior esquerda
.inv-tip--bottom-right Posiciona o tooltip na parte inferior direita
.inv-tip--top-left Posiciona o tooltip na parte superior esquerda
.inv-tip--top-right Posiciona o tooltip na parte superior direita

Bottom Left

Posiciona o tooltip na parte inferior esquerda

<i class="material-icons inv-tip inv-tip--bottom-left" data-tooltip="Descrição">
  info_outline
</i>

Bottom Right

Posiciona o tooltip na parte inferior direita

<i class="material-icons inv-tip inv-tip--bottom-right" data-tooltip="Descrição">
  info_outline
</i>

Top Left

Posiciona o tooltip na parte superior esquerda

<i class="material-icons inv-tip inv-tip--top-left" data-tooltip="Descrição">
  info_outline
</i>

Top Right

Posiciona o tooltip na parte superior direita

<i class="material-icons inv-tip inv-tip--top-right" data-tooltip="Descrição">
  info_outline
</i>