툴팁, tooltip

STEP. 1

<span class="apple">
    <span class="tooltip">준비중입니다.</span>
</span>

STEP. 2

span.apple span.tooltip{
  border-radius: 5px;
  background: #ebd7ad;
  top:5px;
  color: #38291f;
  display: block;
  left: 110%;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100px;  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);

}


#section01 #content01 #content span.apple span.tooltip:before{

  bottom: -20px;

  content: " ";

  display: block;

  height: 20px;

  left: 0;

  position: absolute;

  width: 100%;

}

#section01 #content01 #content span.apple span.tooltip:after{

  border-right: solid #ebd7ad 10px;

  border-top: solid transparent 10px;

  border-bottom: solid transparent 10px;

  border-left: solid transparent 10px;

  content: " ";

  height: 0;

  left: 0%;

  margin-left: -17px;

  position: absolute;

  width: 0;

}

#section01 #content01 #content span.apple:hover span.tooltip{

  opacity: 1;

  pointer-events: auto;

  -webkit-transform: translateY(0px);

  -moz-transform: translateY(0px);

  -ms-transform: translateY(0px);

  -o-transform: translateY(0px);

  transform: translateY(0px);

}

---

결과물 :

before와 after를 좀 더 알아야 할 듯.