js实现tooltip组件 

<body>
   <span>1233</span>
   <div id="box"></div>
   <!-- 移入显示部分 -->
   <div class="tooltip"></div>
   <script src="./jquery.js"></script>
   <script>
       var className = "add";
       var a = 'sss';
       var text="那碎片我那个饭vinso诶精品全文思维并等哦怕热金额藕丝ssssssssssssssssssssssss文化馆覅偶女女生物课厉害日俄国人妇女根据本人我IE人hi根特皇宫闹得分为金额覅认为偶尔会你GV法人女玻璃酸钠"
       var contentHtml = '<div class="'+className+'"  title="'+a+'">'+text+'</div>';
        var oBox = document.getElementById("box");
        oBox.innerHTML=contentHtml;
        $(".tooltip").text(text);
        
        $(".add").hover(function(e){
            $(".tooltip").animate({
                opacity: 1
            },300)
        },function(){
            $(".tooltip").animate({
                opacity: 0
            },300)
        })
   </script>
</body>
　　<style>
        .add{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            word-break:keep-all;
        }
        .tooltip{
            opacity: 1;
            border: 1px solid #ddd;
            padding: 5px 10px;
            border-radius: 5px;
            position: relative;
        }

        .tooltip::after{
            content: "";
            width: 0px;
            height: 0;
            border-left: 10px solid #35333300;
            border-right: 10px solid #4b454500;
            border-top: 15px solid #f52626;
            position: absolute;
            bottom: -15px;
            left: 50%;
        }
    </style>

运行结果：

 

posted @ 2020-08-03 17:27  氧化成风  阅读(854)  评论(0)    收藏  举报