title美化提示框
jquery
前端
发布日期:   2019-02-25
文章字数:   493
阅读时长:   2 分
阅读次数:   
<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes" />
        <title>美化title属性，使title成为提示框</title>
        <script src="../js/jquery.min.js"></script>
        <style type="text/css">
            .tipsy-tooltip &#123;
                font-size: 12px;
                font-family: \5b8b\4f53;
                line-height: 1.5;
                position: absolute;
                padding: 5px;
                z-index: 100003;
                opacity: 1
            &#125;

            .tipsy-arrow &#123;
                position: absolute;
                width: 0;
                height: 0;
                line-height: 0;
                border: 6px dashed #FFA500;
                top: 0;
                left: 20%;
                margin-left: -5px;
                border-bottom-style: solid;
                border-top: 0;
                border-left-color: transparent;
                border-right-color: transparent
            &#125;

            .tipsy-arrow-n &#123;
                border-bottom-color: #FFA500;
            &#125;

            .tipsy-inner &#123;
                background-color: #FFA500;
                color: #fff;
                max-width: 200px;
                padding: 5px 8px 4px 8px;
                text-align: center;
                border-radius: 3px
            &#125;
        </style>

        <body>
            <p>提示：利用title属性制作的提示框效果，不是真正的提示弹出框</p>
            <div>
                <a href="#" title="我是提示文字">提示文字
                    <span style="padding: 0 10px 0 0;">-子元素</span>
                </a>
                <a href="#" title="<p>我是提示文字1</p><p>我是提示文字2</p>">提示文字可换行</a>
            </div>
            <script>
                (function() &#123;
                    $.extend(&#123;
                        sweetTitles: &#123;
                            x: 10,
                            y: 20,
                            tipElements: "a,span,img,div",
                            noTitle: false,
                            isTarget: true,
                            init: function() &#123;
                                var that = this;
                                $(this.tipElements).each(function() &#123;
                                    $(this).mouseover(function(e) &#123;
                                        if(that.isTarget && !$(e.target).is(this)) &#123;
                                            return;
                                        &#125;
                                        if(that.noTitle) &#123;
                                            isTitle = true;
                                        &#125; else &#123;
                                            isTitle = $.trim(this.title) != '';
                                        &#125;
                                        if(isTitle) &#123;
                                            this.myTitle = this.title;
                                            this.title = "";
                                            var tooltip = "<div class='tipsy-tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" +this.myTitle +"</div></div>";
                                            $('body').append(tooltip);
                                            $('.tipsy-tooltip').css(&#123;
                                                "top": (e.pageY + 20) + "px",
                                                "left": (e.pageX - 20) + "px"
                                            &#125;).show('fast');
                                        &#125;
                                    &#125;).mouseout(function() &#123;
                                        if(this.myTitle != null) &#123;
                                            this.title = this.myTitle;
                                            $('.tipsy-tooltip').remove();
                                        &#125;
                                    &#125;).mousemove(function(e) &#123;
                                        $('.tipsy-tooltip').css(&#123;
                                            "top": (e.pageY + 20) + "px",
                                            "left": (e.pageX - 20) + "px"
                                        &#125;);
                                    &#125;);
                                &#125;);
                            &#125;
                        &#125;
                    &#125;);
                &#125;)();
                //调用
                $.sweetTitles.init();
            </script>
        </body>

</html>

示例：请点这里

赏

  转载请注明: XMwarrior title美化提示框

  目录