Tool tip

아래 검은색 박스에 마우스를 갖다대면 툴팁이 표시됩니다.

                              
<div id="wrap">                                
  <div class="toolTipBox">
    <p>마우스를 올려보세요!</p>
      <div class="exTooltip">
          <span>툴팁 예제</span>
      </div>
  </div>
</div>

                              
.toolTipBox{position: relative; width: 150px; border: 1px solid #222; height: 150px;
    &:hover{
        .exTooltip{opacity: 1; visibility: visible;}
    }
}

.exTooltip{opacity: 0; visibility: hidden; position: absolute; top: 50%; left: 180px; transform: translateY(-50%); 
transition: .5s; z-index: 150; 
    span{display: block; min-width: 60px; padding: 5px 0; font-family: $d-fz; font-size: 12px; border-radius: 3px; 
    color: $cfff; text-align: center; background-color: $c333;}
}

                              
.toolTipBox {
  position: relative;
  width: 150px;
  border: 1px solid #222;
  height: 150px;
}

.toolTipBox:hover .exTooltip {
  opacity: 1;
  visibility: visible;
}

.exTooltip {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 180px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: .5s;
  transition: .5s;
  z-index: 150;
}

.exTooltip span {
  display: block;
  min-width: 60px;
  padding: 5px 0;
  font-family: "Noto Sans";
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  background-color: #333;
}

Result

마우스를 올려보세요!

툴팁 예제

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.