jquery插件tooltipv顶部淡入淡出效果使用示例
jquery插件tooltipv顶部淡入淡出效果使用示例。
内部使用
. 代码如下:
<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>
<p id="tooltipcontainer" style="display:none;"></p>
<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 = $("<p></p>");
$('body').prepend($tooltip);
$tooltip.hide();
&nbnbsp; }
})
},
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);
上一篇： 手把手教你搭建ES6的开发运行环境