A better Tooltip with 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>

源文件下载：点击下载

Demo 地址：浏览Demo

原文地址：点击浏览

posted on 2010-06-02 10:07 Flynn 阅读(800) 评论(3) 编辑收藏举报