Jquery提示

最新推荐文章于 2024-09-07 05:06:59 发布

weixin_30594001

最新推荐文章于 2024-09-07 05:06:59 发布

阅读量50

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/lilihai/p/3862598.html

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <style type="text/css">
        #tooptip {
            position: absolute;
            border: 1px;
            padding: 4px;
            color: #333;
    display:none;
        }

    </style>
    <script type="text/javascript">

        $(function() {

            $("a,input").mouseover(function (e) {

                this.mytitle = this.title;
                this.title = "";
                var x = 10;
                var y = 20;
                var div = " <a href='#' id='tooptip'>" + this.mytitle + "</a>";
                $("body").append(div);
                $("#tooptip").css({
                    "top": (e.pageY+y) + "px",
                    left: (e.pageX+x) + "px"
                }).show("fast");
            }).mouseout(function () {
                this.title = this.mytitle;
                $("#tooptip").remove();
            });
        });



    </script>
</head>
<body>
    <div>
        <ul>
            <li><a href="#" class="tooptip" title="这是绝对定位1">这是绝对定位1</a></li> 
            <li> <a href="#" class="tooptip" title="这是绝对定位2">这是绝对定位2</a></li> 
            <li>  <a href="#" class="tooptip" title="这是绝对定位3">这是绝对定位3</a></li> 
            <li>   <a href="#" class="tooptip" title="这是绝对定位4">这是绝对定位4</a></li> 
            <li>   <a href="#" class="tooptip" title="这是绝对定位5">这是绝对定位5</a></li> 
        </ul>
        <div style="height: 20px;">
            
            <input type="text" title="这个是input"/>
        </div>
        <div style="height: 20px">
            <input type="radio" title="这个是radio"/>

        </div>
    </div>
</body>
</html>