Custom Content Tooltip

Custom Content Tooltip with SCSS #Tooltip_Yo

by Yogesh Kanthale

HTML

<div id="about-message">
  <p>Hello World,</p>
  <p>Tooltip (#Tooltip_Yo) with custom content</p>
</div>
<div class="cta-button-wrapper">  
  <button>On hover tooltip</button>
  <div class="hoverbox">
    <div class="yo_tooltip_content">
      Tooltip with custom content
      <ul class="stats">
        <li class="stats-item">Item 1 </li>
        <li class="stats-item">Item 2 </li>
        <li class="stats-item">Item 3</li> 
      </ul>
    </div>
  </div>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  background: #fff;
  text-align: center;
}

#about-message {
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  }
  .cta-button-wrapper {
    position: relative;
    color: #252525;
    padding-bottom: 18px;
    font-size: 1rem;
    button {
      background: $blue-darker;
      border: none;
      border-radius: 5px;
      padding: 8px 14px;
      font-size: 15px;
      color: #fff;
    }
      &:hover {
        .hoverbox {
          background: $blue-darker;
          opacity: 1; 
          transition: 0.5s;
          transition-delay: 0.1s; 
        }
      }
    .hoverbox {
      position: absolute;
      opacity: 0;
      z-index: 1;
      left: 50%;
      top: 50px;
      transform: translateX(-50%);
      .yo_tooltip_content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #0366d6;
        padding: 18px;
        border-radius: 5px;
        color: white;
        line-height: 15px;
        transition: 1s;
        width: 200px;
        ul.stats {
          padding: 20px;
          margin: 0;
          li.stats-item {
            text-align: left;
          }
        }
       }
       }
  }