오른쪽에 툴팁 나오게 하는 소스 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

오른쪽에 툴팁 나오게 하는 소스 정보

CSS 오른쪽에 툴팁 나오게 하는 소스

본문

<!DOCTYPE html>

<html>

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}


.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    

    /* Position the tooltip */

    position: absolute;

    z-index: 1;

    top: -5px;

    left: 105%;

}


.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

<body style="text-align:center;">


<h2>Right Tooltip</h2>

<p>Move the mouse over the text below:</p>


<div class="tooltip">Hover over me

  <span class="tooltiptext">Tooltip text</span>

</div>


</body>

</html>

추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT