풍선 도움말 만들기(툴팁)

See the Pen 풍선 도움말 by nilgi (@nilgi) on CodePen.

 

.cd1tip {
    position: relative;
    display: inline-block;
}

.cd1tip .tip {
    visibility: hidden;
    width: 200px;
    background: #333;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border-radius: 7px;
    /* 풍선 위치 잡기*/
    position: absolute;
    z-index: 1;
    top: -3px;
    left: 120%;
    /* 투명도 */
    opacity: 0; // 아래 transition 불투명으로 만듬.
}

/* 풍선 화살표 */
.cd1tip .tip::after {
    content: "";
    position: absolute;
    border-top: 6px solid transparent;
    border-right: 6px solid #333;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent; // 테두리의 대각선 개념을 이용해 화살표 만들기
    top: 31%;
    right: 100%; // 위치 잡아주기
}

.cd1tip:hover .tip {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.7s; // 풍선도움말이 투명에서 불투명으로 0.7초
}