这是个加了点淡入淡出效果的顶部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. 章节七、6-Map集合的区别

    一.通过entrySet取出Map中的元素 package ZangJie7; import java.util.HashMap; import java.util.Map; public class ...

  2. DAY14(PYTHONS)生成器进阶

    def average(): sum = 0 count = 0 avg = 0 while True: #循环 num = yield avg #遇到yield就停止,防止一开始除数为0导致崩溃 s ...

  3. Jetbrains Idea连接TFS时配置的坑

    #Team Explorer Everywherehttps://www.microsoft.com/en-us/search/result.aspx?q=team+explorer+everywhe ...

  4. Android 官方Demo ActionBarCompat-Styled

    ActionBarCompat-Styled Demo下载地址:https://github.com/googlesamples/android-ActionBarCompat-Styled/#rea ...

  5. python os模块常用方法总结

    该模块提供一种便捷的方式来操作系统 os.environ:返回系统环境变量 os.getenv(env):返回环境变量env的值 os.getpid():当前程序的进程 os.uname():返回一个 ...

  6. js时间戳转化时间格式

    // 判断是否前面补0 add0 (m) { return m < 10 ? '0' + m : m }, // 时间转化 timeFormat (timestamp) { // timesta ...

  7. Linux下对lvm逻辑卷分区大小的调整（针对xfs和ext4不同文件系统）

    当我们在安装系统的时候,由于没有合理分配分区空间,在后续维护过程中,发现有些分区空间不够使用,而有的分区空间却有很多剩余空间.如果这些分区在装系统的时候使用了lvm(前提是这些分区要是lvm逻辑卷分区 ...

  8. Linux下图形数据库Neo4j单机安装

    Neo4j数据库简介 Neo4j 是一个NoSQL的图形数据库(Graph Database).Neo4j使用图(graph)相关的概念来描述数据模型,把数据保存为图中的节点以及节点之间的关系.很多应 ...

  9. 2017 Pig-0.16.0安装

    前提:已经装好hadoop2.7.3 单机版本: export PIG_HOME=/usr/local/pig    export PATH=$PATH:$PIG_HOME/bin 运行:pig -x ...

  10. [20190312]视图v$datafile字段OFFLINE_CHANGE#, ONLINE_CHANGE#.txt

    [20190312]视图v$datafile字段OFFLINE_CHANGE#, ONLINE_CHANGE#.txt --//视图v$datafile存在2个字段OFFLINE_CHANGE#, O ...