컴

css 툴팁 만들기

· 2016-11-09 (수) 11:53:12 · 4329 · 1

<style>

.center {

  text-align:center;

  margin-top:200px;

}

 

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

 

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: #555;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    bottom: 100%;

    left: 50%;

    margin-left: -60px;

}

 

.tooltip:hover .tooltiptext {

    visibility: visible;

}

 

.tooltiptext::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: #555 transparent transparent transparent;

}

</style>

<body>

  <div class="center">

    <div class="tooltip" >Hello World!

       <span class="tooltiptext">this is tooltip!</span>

    </div>

  </div>

</body>

 

|

댓글 1개

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

퍼블리셔팁

1,282건

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

+
분류 제목 글쓴이 날짜 조회
CSS 16-12-19 조회 2,717
HTML 16-12-17 조회 2,325
HTML 16-12-17 조회 2,169
기타 16-12-17 조회 2,762
HTML 16-12-14 조회 2,384
HTML 16-12-14 조회 2,072
HTML 16-12-14 조회 1,905
HTML 16-12-13 조회 3,689
기타 16-12-11 조회 2,645
HTML 16-12-11 조회 4,119
HTML 16-12-11 조회 2,237
반응형 16-12-02 조회 2,924
HTML 16-12-02 조회 1.1만
HTML 16-11-29 조회 6,126
CSS 16-11-29 조회 2,843
반응형 16-11-18 조회 3,659
웹접근성 16-11-14 조회 3,864
웹접근성 16-11-14 조회 2,782
기타 16-11-13 조회 2,749
CSS 16-11-13 조회 2,625
CSS
[CSS]
16-11-13 조회 2,794
CSS 16-11-09 조회 4,330
반응형 16-11-09 조회 4,684
CSS 16-11-03 조회 3,504
반응형 16-11-03 조회 3,663
반응형 16-11-03 조회 8,087
CSS 16-11-01 조회 5,177
CSS 16-11-01 조회 5,780
CSS 16-11-01 조회 4,993
반응형 16-10-24 조회 4,017