Skip to content

Instantly share code, notes, and snippets.

@kettanaito
Created February 5, 2020 13:39
Show Gist options
  • Save kettanaito/52d4ff61277868f1a56ac59f44a14ee1 to your computer and use it in GitHub Desktop.
Save kettanaito/52d4ff61277868f1a56ac59f44a14ee1 to your computer and use it in GitHub Desktop.
Tooltip tick via pseudo-elements
.tooltip {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-width: 350px;
padding: 0.5rem 1rem;
background-color: #fff;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
font-size: 0.85rem;
z-index: 1;
&::before {
--size: 8px;
position: absolute;
content: '';
top: calc(var(--size) * -2);
left: 0;
right: 0;
height: 0;
width: 0;
margin: auto;
border-width: var(--size);
border-style: solid;
border-color: transparent transparent #fff;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment