这是个加了点淡入淡出效果的顶部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. leetcode-69.x的平方根

    leetcode-69.x的平方根 Points 二分查找 牛顿迭代 题意 实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保 ...

  2. WSL优化 (Windows Subsystem for Linux) Linux子系统优化配置

    目录 wsl优化 (Windows Subsystem for Linux) Linux子系统优化 1. 永久修改wsl终端字体 2. 修改Linux终端配色 3. 添加WSL到右键菜单 wsl优化 ...

  3. shell编程—简单的使用（二）

    使用shell编辑.sh使其输出hello tynam 1.新建一个.sh文件,然后进行编辑 vi hello_tynam.sh 2.进行编辑,先按i键进行激活,然后输入echo hello tyna ...

  4. [转载] erp开发－数据查询优化方法

    系统运行环境:MSSQL 2008随着公司业务快速发展,各种业务数据如火箭般的高速增长,出现一个又一个千万行数据的表,往往大表之间的关联,耗费系统大量的磁盘io,并且会影响正常的实时业务的操作,所以我 ...

  5. 【底层原理】深入理解Cache （上）

    存储器是分层次的,离CPU越近的存储器,速度越快,每字节的成本越高,同时容量也因此越小.寄存器速度最快,离CPU最近,成本最高,所以个数容量有限,其次是高速缓存(缓存也是分级,有L1,L2等缓存),再 ...

  6. c/c++ 哈希表 hashtable

    c/c++ 哈希表 hashtable 概念:用key去查找value 实现hash函数有很多方法,本文用除留余数法. 除留余数法的概念: 取一个固定的基数的余数,注意不能用偶数,用偶数的话,分布会不 ...

  7. 数据合并处理concat

    var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山' ...

  8. 5.03-requests_ssl

    import requests url = 'https://www.12306.cn/mormhweb/' headers = { 'User-Agent': 'Mozilla/5.0 (Macin ...

  9. [matlab] 15.罚函数降维

    求非线性规划 min f(x)= x(1)^2 + x(2)^2 + 8 s.t. { x(1)^2-x(2)>=0 , -x(1) - x(2)^2 +2 = 0, x(1)>=0 ,x ...

  10. SpringBoot-06：SpringBoot增删改查一套完整的考试案例

    本此博客记录一套考试题,随后我把项目以及题目发到github上,简单的说一下springboot的开发 本此考试题用Spring+SpringMVC+MyBatis+SpringBoot+MySQL+ ...