tooltip学习

最新推荐文章于 2023-11-27 21:00:00 发布

Miya_Ye

最新推荐文章于 2023-11-27 21:00:00 发布

阅读量286

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/april_4/article/details/79217135

版权

javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

学习了幕客网上的toolTip。。。链接点击打开链接

做了课后作业，记录下

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ToolTip效果</title>
    <style>
        body {
            font-size: 18px;
            line-height: 1.8;
            font-family: "Microsoft YaHei", "微软雅黑";
        }

        #demo {
            width: 500px;
            margin: 30px auto;
            padding: 20px 30px;
            position: relative;
            background-color: #fff;
        }

        #demo h2 {
            color: #03F;
        }

        #demo .tooltip {
            color: #03F;
            cursor: help;
        }
        #demo .toolTipBox{
            border-radius: 10px;
            -mos-border-radius:10px;
            -webkit-border-radius:10px;
            box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
            -mos-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
            -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
            position:absolute;
            display:block;
            background:#fff;
            padding:20px;
        }


    </style>
</head>

<body>
<div id="demo">
    <p><a class="tooltip" id="tooltip1">慕课网</a>的使命是传播互联网最前沿技术，帮助更多的人实现梦想！在慕课网前端开发、
        <a class="tooltip" id="tooltip2">Android</a>开发、<a class="tooltip" id="tooltip3">iOS</a>开发等课程统统有，你还在等什么，赶紧来学习吧。
    </p>
</div>
<script type="text/javascript">
    var demo = document.getElementById("demo");
    function addEvent(element,event,callbackFunc){
        if(element.addEventListener){
            element.addEventListener(event,callbackFunc,false)
        }else if(event.attachEvent){
            event.attachEvent('on'+event,callbackFunc)
        }
    }

    function showToolTips(obj,id,html,width){
        if(document.getElementById(id) == null){
            var toolTipBox;
            toolTipBox = document.createElement("div");
            toolTipBox.className = "toolTipBox";
            toolTipBox.id = id;
            toolTipBox.innerHTML = html;
            obj.appendChild(toolTipBox);

            obj.οnmοuseleave=function(){
                setTimeout(function(){
                    document.getElementById(id).style.display='none';
                },300)
            }

        }else{
            document.getElementById(id).style.display='block';
        }
    }

    addEvent(demo,"mouseover",function(e){
        var event= e || window.event;
        var target = event.target || event.srcElement;


        if(target.className == "tooltip"){
            var html;
            var id;
            var width = 300;


            switch(target.id){
                case "tooltip1":
                    id="t1";
                    html="<iframe src='http:/\/baike.baidu.com/view/10962527.htm'></iframe>";
                    break;
            }

            showToolTips(target,id,html,width);

        }

    })



</script>
</body>
</html>

Miya_Ye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tooltip学习

学习了幕客网上的toolTip。。。链接点击打开链接做了课后作业，记录下 ToolTip效果 body { font-size: 18px; line-height: 1.8; font-family: "Microsoft YaHei", "微软雅黑";
复制链接

扫一扫