`

A better Tooltip with jQuery

jquery 
阅读更多

在国外的一个网站上看到了一份不错的jQuery 插件，主要是样式挺好的，于是转了过来方便以后需要是拿来用之.... 

预览一下：

 

文件主要文件及目录：

  • Images  folder contains the following images:
  • – - tipTip.png  – created in Step 2
  • – - tipMid.png  – created in Step 2
  • – - tipBtm.png  – created in Step 2
  • style.css  – created in Step 3
  • jquery-1.3.1.min.js  – download this here
  • jquery.betterTooltip.js  – – created in Step 5

 三个图片切片位置为：

由于是PNG格式，IE支持不是很好，载入的时候边框会黑一下，然后才会用图片填充（我刚用IE8 也是这样）

看了别人的回复后说有个 ie_pngfix 的东东，以后再研究一下...

如果实在不行，我不用PNG还不行....O(∩_∩)O哈哈~ 

 

CSS 主要文件如下：

 

.tip {  

    width: 212px;  

    padding-top: 37px;  

    display: none;  

    position: absolute;  

    background: transparent url(images/tipTop.png) no-repeat top;}  

  

.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}  

.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottombottom; height: 32px;}

 jQeury： 

$.fn.betterTooltip = function(options){  

  

        /* Setup the options for the tooltip that can be 

           accessed from outside the plugin              */  

        var defaults = {  

            speed: 200,  

            delay: 300  

        };  

  

        var options = $.extend(defaults, options);  

  

        /* Create a function that builds the tooltip 

           markup. Then, prepend the tooltip to the body */  

        getTip = function() {  

            var tTip =  

            "<div class='tip'>" +  

                "<div class='tipMid'>"    +  

                "</div>" +  

                "<div class='tipBtm'></div>" +  

            "</div>";  

            return tTip;  

        }  

        $("body").prepend(getTip());  

  

        /* Give each item with the class associated with 

           the plugin the ability to call the tooltip    */  

        $(this).each(function(){  

  

            var $this = $(this);  

            var tip = $('.tip');  

            var tipInner = $('.tip .tipMid');  

  

            var tTitle = (this.title);  

            this.title = "";  

  

            var offset = $(this).offset();  

            var tLeft = offset.left;  

            var tTop = offset.top;  

            var tWidth = $this.width();  

            var tHeight = $this.height();  

  

            /* Mouse over and out functions*/  

            $this.hover(function() {  

                tipInner.html(tTitle);  

                setTip(tTop, tLeft);  

                setTimer();  

            },  

            function() {  

                stopTimer();  

                tip.hide();  

            }  

        );           

  

        /* Delay the fade-in animation of the tooltip */  

        setTimer = function() {  

            $this.showTipTimer = setInterval("showTip()", defaults.delay);  

        }  

  

        stopTimer = function() {  

            clearInterval($this.showTipTimer);  

        }  

  

        /* Position the tooltip relative to the class 

           associated with the tooltip                */  

        setTip = function(top, left){  

            var topOffset = tip.height();  

            var xTip = (left-30)+"px";  

            var yTip = (top-topOffset-60)+"px";  

            tip.css({'top' : yTip, 'left' : xTip});  

        }  

  

        /* This function stops the timer and creates the 

           fade-in animation                          */  

        showTip = function(){  

            stopTimer();  

            tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);  

        }  

    });  

};

 示例代码:

 

<head>     

    <link href="theme/style.css" rel="stylesheet" type="text/css" media="all" /> 

    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 

    <script type="text/javascript" src="js/jquery.betterTooltip.js"></script> 

    <script type="text/javascript"> 

        $(document).ready(function(){

            $('.tTip').betterTooltip({speed: 150, delay: 300});

        });

    </script> 

    

    

</head> 

<body>     

    

        <div class="tTip" title="The letter T. ">What's the difference between here and there?</div> 

      

         <a href="#" title="http://flynn.cnblogs.com">My Blog</a>

</body> 

</html>

 原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/comment-page-1/#comments

分享到：
| Jquery 经典插件收集
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics