개인적인 정리

툴팁 css 본문

HTML & CSS

툴팁 css

yeon.Biju 2016. 12. 19. 10:11

.tooltiptxt_air {

    display: inline-block;

    position: absolute;

    left: 0px;

    top: -43px;

    border: 1px solid #aaa;

    border: 1px solid rgba(0,0,0,.2);

    border-radius: 5px;

    padding: 10px;

    color: #666;

    background-color: #fff;

    z-index: 1001;

    width: 230px;

    font-size: 11px;

    letter-spacing: -1px;

    display: none;

}




아래 방식에서 위 방식으로 변경

 [data-tooltip-text]:hover { 

  position: relative; 

 } 


 [data-tooltip-text]:hover:after { 

  content: attr(data-tooltip-text); 

     position: absolute; 

  bottom: 100%; 

  left: -50px; 

     top: -45px; 

     border: 1px solid rgba(0,0,0,.2); 

     border-radius: 5px; 

     padding: 10px; 

     color: #666; 

     background-color: #fff; 

     z-index: 1001; 

     width: 240px; 

     font-size: 13px; 

     letter-spacing: -1px; 

 } 


--> 호환성 관련해서 아래 방식일 경우 문제가 되어서 위방식으로 변경한 후에

스크립트로 추가 작업을 해줌

Comments