jquery tooltip

这是个加了点淡入淡出效果的顶部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相关推荐

流行的jQuery信息提示插件(jQuery Tooltip Plugin)
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning, by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好,会 ...
推荐 25 个优雅的 jQuery Tooltip 插件
jQuery 工具提示可以让网站上一些小的帮助信息显示更加直观,提升用户的体验.下面我们为你推荐 25 个最好的工具提示插件: 1. jqTooltip jqTooltip 2. Pop! Simpl ...
30个非常流行的提示信息插件（jQuery Tooltip Plugin）
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
流行的jQuery信息提示插件(jQuery Tooltip Plugin)【转】
流行的jQuery信息提示插件(jQuery Tooltip Plugin) Learning , by 木公. 信息提示虽然是小东西,但是在网站设计中却起到了巨大的作用.如果你网站的信息提示做的好, ...
jQuery Tooltip插件
jQuery Tooltip 插件取代了原生的工具提示框,让它们可自定义,您只需要调整它们的内容.位置和外观即可. 该插件目前版本是 1.3,已经很长时间没有更新,推荐使用 jQuery UI 工具提 ...
15 jQuery Plugins To Create A User Friendly Tooltip
Tooltip is a good way to show extra information when user hovers the cursor over an element. The &qu ...
为开发者准备的15 款Tooltip工具提示jQuery插件
http://www.admin10000.com/document/2332.html tooltip或者infotip或者hint,是一种常见的图形用户界面元素.它用于连同一个光标,通常是一个鼠标 ...
240个jquery插件
240个jquery插件 http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ File uplo ...
jQuery插件开发--（转）
1,开始可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字: jQuery.fn.myPlugin = function(){ //开始写你的代码吧! ...

jquery tooltip

jquery tooltip相关推荐

最新文章

热门文章