Skip to content

Instantly share code, notes, and snippets.

@LyudmilaM
Created January 13, 2022 08:12
Show Gist options
  • Save LyudmilaM/2d84ce849013472bb9313966ed8fff6d to your computer and use it in GitHub Desktop.
Save LyudmilaM/2d84ce849013472bb9313966ed8fff6d to your computer and use it in GitHub Desktop.
Tooltip - подсказка html, css.
.smallBlock
a.tooltip-my(href="#" data-tooltip="Никуда не ведет.") Ссылка с подсказкой.
.smallBlock
border: 1px solid purple
padding: 50px 10px
.tooltip-my
position: relative
display: inline-block
&::after
position: absolute
top: -35px
right: 40px
padding: 5px
font-size: 16px
color: white
visibility: hidden
content: attr(data-tooltip)
background-color: purple
opacity: 0
transition: .3s
&:hover::after
visibility: visible
opacity: 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment