这是个加了点淡入淡出效果的顶部tooltip控件，会自动消失

用法：

<head>

    <title></title>

    <link href="base.css" rel="stylesheet" type="text/css" />

    <link href="jquery.tooltip.less" rel="stylesheet/less" type="text/css">

    <script src="less-1.4.2.min.js" type="text/javascript"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

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

</head>

<body>

    <div id="tooltipContainer" style="display:none;"></div>

    <button onclick="javascript:tg1();">info</button>

    <button onclick="javascript:tg2();">alert</button>

    <button onclick="javascript:tg3();">hide</button>

    <script language="javascript">

        $("#tooltipContainer").tooltip();  //初始化

        function tg1() {

            $("#tooltipContainer").tooltip("info", "据你的使用和需求的不同...");

        }

        function tg2() {

            $("#tooltipContainer").tooltip("alert", "据你的使用和需求的不同...");

        }

        function tg3() {

            $("#tooltipContainer").tooltip("hide");

        }

    </script>

</body>

css

.tooltip_info

{

    background:green;

    font-size:20px;

    border-radius: 10px;

}

.tooltip_alert

{

    background:yellow;

    font-size:20px;

    border-radius: 10px;

}

jquery.tooltip插件js代码

(function ($) {

    var methods = {

        init: function (options) {

            return this.each(function () {

                var $this = $(this);

                var settings = $this.data('tooltip');

                if (typeof (settings) == 'undefined') {

                    var defaults = {

                        infoCss: 'tooltip_info',

                        alertCss: 'tooltip_alert',

                        disappearTime: 1000

                    }

                    settings = $.extend({}, defaults, options);

                    $this.data('tooltip', settings);

                } else {

                    settings = $.extend({}, settings, options);

                    $this.data('tooltip', settings);

                }

                $tooltip = $("#tooltip");

                $tooltip.hide();

                if ($tooltip.length == 0) {

                    $tooltip = $("<div></div>");

                    $('body').prepend($tooltip);

                    $tooltip.hide();

                }

            })

        },

        info: function (options) {

            return this.each(function () {

                var $this = $(this);

                var setting = $this.data('tooltip');

                clearTimeout($this.data("autoDisappearHandle"));

                $tooltip.html(options);

                $tooltip.removeClass(setting.alertCss).addClass(setting.infoCss);

                $tooltip.fadeIn();

                var hideTooltip = function () {

                    $tooltip.fadeOut();

                }

                $this.data("autoDisappearHandle", setTimeout(hideTooltip, setting.disappearTime));

            })

        },

        alert: function (options) {

            return this.each(function () {

                var $this = $(this);

                var setting = $this.data('tooltip');

                clearTimeout($this.data("autoDisappearHandle"));

                $tooltip.html(options);

                $tooltip.removeClass(setting.infoCss).addClass(setting.alertCss);

                $tooltip.fadeIn();

                var hideTooltip = function () {

                    $tooltip.fadeOut();

                }

                $this.data("autoDisappearHandle", setTimeout(hideTooltip, setting.disappearTime));

            })

        },

        hide: function () {

            return this.each(function () {

                var $this = $(this);

                clearTimeout($this.data("autoDisappearHandle"));

                $tooltip.fadeOut();

            })

        }

    };

    $.fn.tooltip = function () {

        var method = arguments[0];

        if (methods[method]) {

            method = methods[method];

            arguments = Array.prototype.slice.call(arguments, 1);

        } else if (typeof (method) == 'object' || !method) {

            method = methods.init;

        } else {

            $.error('Method ' + method + ' does not exist on jQuery.tooltip');

            return this;

        }

        return method.apply(this, arguments);

    }

})(jQuery);

不知猴年马月才能学成前端。

jquery tooltip的更多相关文章

  1. 30个非常流行的提示信息插件（jQuery Tooltip Plugin）

    在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...

  2. jquery tooltip插件

    qtip2:http://qtip2.com/ bower install qtip2 // lowercase! 引入一个css和插件即可. <script type="text/j ...

  3. jquery tooltip.js

    1.引用关联的js脚本 <script type="text/javascript" src="script/jquery-1.3.2.min.js"&g ...

  4. jquery插件colortip（tooltip类型）

    效果预览:http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html 源代码下载:http: ...

  5. 经验分享：10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  6. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  7. 240个jquery插件（转）

    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...

  8. jQuery插件开发--（转）

    1,开始 可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

  9. jQuery插件开发详细教程

    这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...

随机推荐

  1. .net 前端gb2312编码，后台获取参数乱码（因为表单提交的时候是utf-8编码 则在后台读取参数时会出现乱码）

    在表单中设置编码 ' accept-charset="utf-8"  '即可: <form id="login_submit" action=" ...

  2. UVA 1152 4 Values whose Sum is 0 (枚举+中途相遇法)(+Java版)(Java手撕快排+二分)

    4 Values whose Sum is 0 题目链接:https://cn.vjudge.net/problem/UVA-1152 ——每天在线,欢迎留言谈论. 题目大意: 给定4个n(1< ...

  3. 【PHPStorm使用手册】php interpreter is not configured

    php interpreter is not configured 未配置php解析器 第一步: 引入下载好的php.exe 打开窗口 file -> settings -> Langua ...

  4. Android/IOS手机使用Fiddler抓包

    对于Android和IOS开发及测试的同事来说抓包是一个很重要的事,有利于排查问题所在,快速定位问题.但长期以来一直没有一款可以快速抓包的工具,直到有了Fiddler2. 使用步骤: 1.  Fidd ...

  5. spring4笔记----“零配置”：spring提供的几个Annotation标注

    @Component  :标注一个普通的Spring Bean类 @Controller    :标注一个控制器组件器 @Service        :标注一个业务逻辑组件器 @Repository ...

  6. TNS-12535: TNS:operation timed out

    AWS数据库云服务器出现了连接超时的错误,于是查看相关时段的alert日志,发现了如下的错误: **************************************************** ...

  7. SQL Server 锁实验（UPDATE加锁探究）

    update语句: 本例中由于看到的是update执行完的锁情况,因此无法看到IU锁,但其实针对要修改的数据页和索引页会先加IU锁,记录和键先加U锁,然后再转化为IX和X锁. 如果想要看到IU锁和U锁 ...

  8. c#qq发邮件

    // SMTP(Simple Mail Transport Protocol)简单邮件传输协议.在.NET Frameword类库中提供SmtpClient类(System.Net.Mail),她提供 ...

  9. Windows 下自动同步文件夹内容到另一个文件夹下

    实现windows 使用bat脚本文件,复制文件夹到另一个盘,参考如下代码:/y是可以不显示:提示你需要覆盖一个文件,如下图: bat文件内容为 @echo off echo "使用bat脚 ...

  10. C语言 文件的读写操作

    //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ #include<stdio.h> #include<stdlib.h> void ...