A better Tooltip with jQuery-CSDN博客

在国外的一个网站上看到了一份不错的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

原文地址：点击浏览

转载于:https://www.cnblogs.com/Flynn/archive/2010/06/02/1749747.html