css 툴팁

기본 툴팁

 

사용자가 요소 위에서 마우스를 움직일 때 나타나는 툴팁을 생성하십시오 :

 

예

<style>

/* Tooltip container */

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */

}

 

/* Tooltip text */

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    padding: 5px 0;

    border-radius: 6px;

 

    /* Position the tooltip text - see examples below! */

    position: absolute;

    z-index: 1;

}

 

/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

 

<div class="tooltip">Hover over me

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

</div>