title: CSS/SCSS Custom tooltip effect
body: <p>Hello guys I'm trying to create a custom tooltip, with a cool hovering effect. I found a code on the internet which does almost what I want. Below is the code</p>
  
  <pre><code>.tooltip {
    position: relative;
  
    &amp;__item {
      position: absolute;
      min-width: 100px;
      padding: 20px;
      visibility: hidden;
      opacity: 0;
      background: white;
      transition: all .250s cubic-bezier(0, 0, 0.2, 1);
      color: #484848;
      border: 1px solid #cecece;
      border-radius: 3px;
      font-weight: 500;
      box-shadow: 0 2px 1px #bcbcbc;
      z-index: 4;
      &amp;:after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
      }
    }
  
    &amp;__initiator {
      cursor: pointer;
      z-index: 5;
    }
  
    &amp;[data-direction="bottom"] {
  
      .tooltip__initiator:hover ~ .tooltip__item {
        transform: translate3d(-50%, 0, 0);
        visibility: visible;
        opacity: 1;
      }
  
      .tooltip__item {
        top: calc(100% + 1em);
        left: 50%; 
        transform: translate3d(-50%, -15px, 0);
  
        &amp;:after {
          top: -0.5em;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          border-width: 0 0.5em 0.5em 0.5em;
          border-color: transparent transparent white transparent;
          -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
          filter: drop-shadow(1px -1px 1px #bcbcbc);
        }
      }
    }
  }
  </code></pre>
  
  <p>and here is the result
  <a href="https://i.stack.imgur.com/5Ymov.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Ymov.png" alt="Tool tip result"></a></p>
  
  <p>What I want is that the custom tooltip should be <strong>displayed above the component</strong> <strong>NOT below</strong>. I'm new to css/scss, so can a kind person edit the code for me so as to obtain this effect? </p>
  
  <p><strong>UPDATE</strong><br>
  <a href="https://codepen.io/nevadskiy/pen/YYGbao" rel="nofollow noreferrer">This link</a> is where I got the code from. It has a working example.</p>