<!-- Default -->
<i class="material-icons inv-tip inv-tip--bottom-left" 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>
<!-- 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>
<!-- Top Right -->
<i class="material-icons inv-tip inv-tip--top-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>
<!-- Top Left -->
<i class="material-icons inv-tip inv-tip--top-left" 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>
/* Default */
{
"tip": {
"modifier": "inv-tip--bottom-left",
"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."
}
}
/* Bottom Right */
{
"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."
}
}
/* Top Right */
{
"tip": {
"modifier": "inv-tip--top-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."
}
}
/* Top Left */
{
"tip": {
"modifier": "inv-tip--top-left",
"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."
}
}
.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;
}
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 | 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 |
Posiciona o tooltip na parte inferior esquerda
<i class="material-icons inv-tip inv-tip--bottom-left" data-tooltip="Descrição">
info_outline
</i>
Posiciona o tooltip na parte inferior direita
<i class="material-icons inv-tip inv-tip--bottom-right" data-tooltip="Descrição">
info_outline
</i>
Posiciona o tooltip na parte superior esquerda
<i class="material-icons inv-tip inv-tip--top-left" data-tooltip="Descrição">
info_outline
</i>
Posiciona o tooltip na parte superior direita
<i class="material-icons inv-tip inv-tip--top-right" data-tooltip="Descrição">
info_outline
</i>