.progress4 {

        position: relative;

        width: 100px;

        height: 100px;

    }

    

    .progress4:hover:after {

        background: #333;

        background: rgba(0,0,0,.8);

        border-radius: 5px;

        bottom: 26px;

        color: #fff;

        content: attr(data-tooltip);

        left: 20%;

        padding: 5px 15px;

        position: absolute;

        z-index: 98;

        width: 300px;

        white-space: pre-line;

        text-align:left;

        keep-all: break-all;

        margin-left: -250px; 

    }

    

    .progress4:hover:before {

        border: solid;

        border-color: #333 transparent;

        border-width: 6px 6px 0 6px;

        bottom: 20px;

        content: "";

        left: 50%;

        position: absolute;

        z-index: 99;

    }




<span style="color:#ffffff" data-html="true" class="progress3" 

data-tooltip="정상:

국가 전력수급 현황

- 500만KW 이상 ~ 50000만KW 이하

빌딩내 전력수급 현황

- 500KW 이상 ~ 50000KW 이하">정상</span>

+ Recent posts