컴

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

· 2017-07-20 (목) 00:57:35 · 3072

<!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>

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

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

+
분류 제목 글쓴이 날짜 조회
CSS 17-08-07 조회 2,657
CSS 17-08-07 조회 2,601
CSS 17-08-06 조회 2,027
CSS 17-08-06 조회 1,902
CSS 17-08-06 조회 2,199
CSS 17-08-03 조회 2,224
CSS 17-08-03 조회 2,953
CSS 17-08-03 조회 2,414
HTML 17-08-02 조회 2,849
HTML 17-08-02 조회 3,285
HTML 17-08-02 조회 3,673
HTML 17-08-01 조회 4,088
HTML 17-08-01 조회 2,566
HTML 17-08-01 조회 2,744
HTML 17-07-28 조회 2,735
HTML 17-07-28 조회 2,320
HTML 17-07-28 조회 2,613
기타 17-07-26 조회 2,503
기타 17-07-26 조회 2,734
기타 17-07-26 조회 3,616
반응형 17-07-25 조회 3,143
반응형 17-07-25 조회 2,326
반응형 17-07-25 조회 2,290
반응형 17-07-24 조회 2,616
반응형 17-07-24 조회 2,769
반응형 17-07-24 조회 2,852
CSS 17-07-20 조회 2,990
CSS 17-07-20 조회 3,073
CSS 17-07-20 조회 3,028
CSS 17-07-18 조회 2,712