text tooltip_without_js

Posted 2021-04-30

// HTML
  <div class="tooltip">
    <div class="tooltip-content">
      <div class="tooltip-arrow"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, tenetur.</p>
    </div>
  </div>
  
// SASS
  .tooltip
    position: relative
    width: 100%
    max-width: 200px
    height: 50px
    margin: 200px auto
    border: 1px solid gray
    cursor: pointer

    &:hover
      .tooltip-content
        display: block
        animation: tooltip .7s ease forwards

.tooltip-content
  display: none
  opacity: 0
  position: absolute
  bottom: calc(100% + 50px)
  left: 50%
  transform: translateX(-50%)
  width: 100%
  max-width: 350px
  min-width: 300px
  padding: 5px
  border: 1px solid #e9e9e9
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.15)

.tooltip-arrow
  position: absolute
  z-index: 1
  bottom: -15px
  left: 50%
  transform: translateX(-50%)
  width: 20px
  height: 25px
  overflow: hidden

  &:before
    content: ''
    position: absolute
    top: -4px
    left: 50%
    width: 20px
    height: 20px
    background-color: #fff
    transform: translateX(-50%) rotate(45deg)
    box-shadow: 8px 8px 9px -4px rgba(0,0,0,.15)
    
@keyframes tooltip
  0%
    opacity: 0
  100%
    opacity: 1
    bottom: calc(100% + 30px)