这是个加了点淡入淡出效果的顶部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. Windows系统java下载与安装

    Windows系统java下载与安装 一.前言 作者:深圳-风尘 联系方式:QQ群[585499566] 博客:https://www.cnblogs.com/1fengchen1/ 能读懂本文档人: ...

  2. Android 与Java 进程退出 killProcess与System.exit

    android所有activity都在主进程中,在清单文件Androidmanifest.xml中可以设置启动不同进程,Service需要指定运行在单独进程?主进程中的主线程?还是主进程中的其他线程? ...

  3. Android 如何解决dialog弹出时无法捕捉Activity的back事件

    Android 如何解决dialog弹出时无法捕捉Activity的back事件 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到b ...

  4. css 布局之定位 相对/绝对/成比例缩放

    给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...

  5. python安装pbkdf2 遇到错误TypeError: __call__() takes exactly 2 arguments (1 given)

    python安装模块时遇到如下错误, import packaging.requirements File "/usr/lib/python2.7/site-packages/packagi ...

  6. zabbix监控自动发现监控tomcat(V1)

    背景说明: 由于zabbix监控使用自带的模版,只能监控主机上只有1个tomcat的场景适合,虽然网上很多朋友都是在每个监控项上面添加一个空格来解决问题.但是个人感觉这种方法还是蛮麻烦的,所以写一篇使 ...

  7. [20180928]如何能在11g下执行.txt

    [20180928]如何能在11g下执行.txt --//链接问的问题: http://www.itpub.net/thread-2105467-1-1.html create table test( ...

  8. java笔记--对信号量Semaphore的理解与运用

    java Semaphore 信号量的使用: 在java中,提供了信号量Semaphore的支持. Semaphore类是一个计数信号量,必须由获取它的线程释放, 通常用于限制可以访问某些资源(物理或 ...

  9. unix2dos和dos2unix处理换行问题

    今天同事QQ给发来一个文件内容如下: 希望把文件内容转换为update table_name set col_name=第一列 where col_name=第二列;这种SQL格式,使用UE列模式秒秒 ...

  10. UNIX高级环境编程（14）文件IO - O_DIRECT和O_SYNC详解 < 海棠花溪 >

    春天来了,除了工作学习,大家也要注意锻炼身体,多出去运动运动.  上周末在元大都遗址公园海棠花溪拍的海棠花.   进入正题. O_DIRECT和O_SYNC是系统调用open的flag参数.通过指定o ...