tooptip标签提示

2017-11-10 本文已影响0人猫久伴你入眠
兼容ie9+
效果如图:
image.png
代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .qj_tooptip {
            position: relative;
        }
        
        .qj_tooptip::after,
        .qj_tooptip::before {
            position: absolute;
            z-index: 99;
            display: inline-block;
            pointer-events: none;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            transition: all .3s ease;
            font-size: inherit;
        }
        
        .qj_tooptip::after {
            padding: 5px 10px;
            content: attr(data-qjtooptip);
            background: #383838;
            color: #fff;
            border-radius: 5px;
        }
        
        .qj_tooptip::before {
            content: '';
            border: 5px solid transparent;
        }
        
        .qj_tooptip[data-direction="right"]::after {
            left: 110%;
            left: -webkit-calc(100% + 5px);
            left: -moz-calc(100% + 5px);
            left: clac(100% + 5px);
        }
        
        .qj_tooptip[data-direction="right"]::before {
            border-right-color: #383838;
            left: -webkit-calc(100% - 5px);
            left: -moz-calc(100% - 5px);
            left: clac(100% - 5px);
        }
        
        .qj_tooptip[data-direction="left"]::after {
            left: initial;
            right: -webkit-calc(100% + 5px);
            right: -moz-calc(100% + 5px);
            right: clac(100% + 5px);
        }
        
        .qj_tooptip[data-direction="left"]::before {
            border-left-color: #383838;
            left: -5px;
        }
        
        .qj_tooptip[data-direction="right"]::before,
        .qj_tooptip[data-direction="right"]::after,
        .qj_tooptip[data-direction="left"]::after,
        .qj_tooptip[data-direction="left"]::before {
            top: 50%;
            -webkit-transform: translate3d(0, -50%, 0);
            -moz-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
        }
        
        .qj_tooptip[data-direction="top"]::after {
            bottom: -webkit-calc(100% + 5px);
            bottom: -moz-calc(100% + 5px);
            bottom: clac(100% + 5px);
        }
        
        .qj_tooptip[data-direction="top"]::before {
            border-top-color: #383838;
            top: -5px;
        }
        
        .qj_tooptip[data-direction="down"]::after {
            top: -webkit-calc(100% + 5px);
            top: -moz-calc(100% + 5px);
            top: clac(100% + 5px);
        }
        
        .qj_tooptip[data-direction="down"]::before {
            border-bottom-color: #383838;
            bottom: -5px;
        }
        
        .qj_tooptip[data-direction="top"]::before,
        .qj_tooptip[data-direction="top"]::after,
        .qj_tooptip[data-direction="down"]::after,
        .qj_tooptip[data-direction="down"]::before {
            left: 50%;
            -webkit-transform: translate3d(-50%, 0, 0);
            -moz-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
        }
        
        .qj_tooptip:hover::after,
        .qj_tooptip:hover::before {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body style="text-align:center;">
    <br/>

    <button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="right">右边</button>

    <br>
    <br>
    <button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="left">左边</button>

    <br>
    <br>
    <button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="top">上边</button>

    <br>
    <br>
    <button class="qj_tooptip" data-qjtooptip="提示文字" data-direction="down">下边</button>


    <span class="qj_tooptip" data-qjtooptip="提示文字" data-direction="down">sf</span>
</body>

</html>
tooptip标签提示

猜你喜欢

热点阅读
