tooltip提示插件

tooltip提示信息插件

原理：定位元素在页面中的位置即坐标信息，将显示节点元素插入到body中绝对应为到相应位置，显示内容从指定元素的属性(dataMess)中获取或者通过设置获取。

使用方法：

$("#test").iTooltip({"posType":"top"});

<div id="test" class="test" dataMess="测试数据中。。。<br/>测试数据中。。。">测试</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>tooltip提示插件</title>
<style>.iTooltipMes{
position: absolute;
display: block;
color: #000;
font-size: 12px;
padding: 10px;
background: #fff;
border: 1px solid #999;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
z-index: 999999;
}

.iToolTri{
position: absolute;
z-index: 1;
display: block;
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
border: 8px solid #999999;
}

.iToolTri i{
position: absolute;
z-index: 1;
display: block;
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
border: 6px solid #ffffff;

}

.iToolTriTop{
left: 50%;
bottom: -16px;
margin-left: -8px;
border-color: #999999 transparent transparent transparent;
border-style: solid dashed dashed dashed;
}

.iToolTriTop i{
left: -6px;
bottom: -4px;
border-color: #ffffff transparent transparent transparent;
border-style: solid dashed dashed dashed;
}

.iToolTriBtm{
left: 50%;
top: -16px;
margin-left: -8px;
border-color: transparent transparent #999999 transparent;
border-style: dashed dashed solid dashed;
}

.iToolTriBtm i{
left: -6px;
top: -4px;
border-color: transparent transparent #ffffff transparent;
border-style: dashed dashed solid dashed;
}

.iToolTriRt{
left: -16px;
top: 50%;
margin-top: -8px;
border-color: transparent #999999 transparent transparent ;
border-style: dashed solid dashed dashed ;
}

.iToolTriRt i{
left: -4px;
top: -6px;
border-color: transparent #ffffff transparent transparent;
border-style: dashed solid dashed dashed;
}

.iToolTriLt{
right: -16px;
top: 50%;
margin-top: -8px;
border-color: transparent transparent transparent #999999;
border-style: dashed dashed dashed solid;
}

.iToolTriLt i{
right: -4px;
top: -6px;
border-color: transparent transparent transparent #ffffff;
border-style: dashed dashed dashed solid;
}

.animated {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.hinge {
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}

.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}

100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}

100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}

@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}

100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
</style>

Plugin.prototype = {
init: function() {
var _this = this;

$(document).on("mouseover", _this.elem, function() {
var $this = $(this);
if (_this.isOk) {
_this.isOk = false;
_this.setShow($this);
}
});

$(document).on("mouseout", _this.elem, function() {
if(!_this.isOk){
_this.isOk = true;
_this.tmpPosType = _this.opts.posType;
$(".iTooltipMes").remove();

}
});

},
setShow: function(obj) {
var _this = this;

var l = obj.offset().left;
var t = obj.offset().top;
var w = obj.width();
var h = obj.height();

var mess = _this.opts.dataMess || obj.attr("dataMess");

var tmpHtml = "<div class='iTooltipMes animated'>" + mess + "<i class='iToolTri'><i></i></i></div>";
$("body").append(tmpHtml);

var iTooltipMes = $(".iTooltipMes");
var ow = iTooltipMes.outerWidth();
var oh = iTooltipMes.outerHeight();

var tmpt = 0;
var tmpl = 0;
var distance = 10;

var win = $(window);
var winW = win.width();
var winH = win.height();
var winTop = win.scrollTop();

if( t < (h + distance + winTop) && _this.opts.posType ==="top"){
_this.tmpPosType = "bottom";
}

if((l+w+ow > winW) && _this.opts.posType ==="right"){
_this.tmpPosType = "left";
}

if((l< ow ) && _this.opts.posType ==="left"){
_this.tmpPosType = "right";
}

if( ((t - winH + oh) > winTop) && _this.opts.posType ==="bottom"){
_this.tmpPosType = "top";
}

_this.tmpPosType = _this.tmpPosType || _this.opts.posType;

switch(_this.tmpPosType){
case "top":
tmpt = t - oh - distance;
tmpl = l + ((w-ow)/2);
break;
case "right":
tmpt = t - ((oh-h)/2) ;
tmpl = l + w + distance;
break;
case "bottom":
tmpt = t + h + distance;
tmpl = l + ((w-ow)/2);
break;
case "left":
tmpt = t - ((oh-h)/2);
tmpl = l - ow - distance;
break;
default:
break;
}

if(!!_this.opts.addClass){
iTooltipMes.addClass(_this.opts.addClass);
}

iTooltipMes.addClass(_this.anis[_this.tmpPosType]).css({
left: tmpl + "px",
top: tmpt + "px"
}).find(".iToolTri").addClass(_this.tris[_this.tmpPosType]);

}
};

$.fn[pluginName] = function() {
var args = arguments;

if(!$(this).selector){
return;
}

$(this).data("iTooltip", new Plugin(this, args[0]));
}

})(jQuery, window, document);</script>
<script type="text/javascript">
$("#left").iTooltip({ "posType":"right"});
$("#top").iTooltip({ "posType":"bottom"});
$("#right").iTooltip({ "posType":"left"});
$("#bottom").iTooltip({ "posType":"top"});
$("#center").iTooltip({ "posType":"top"});
</script>
</body>
</html>

运行代码

tooltip提示插件的更多相关文章

BootStrap之提示工具（Tooltip）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
Bootstrap-Plugin：提示工具（Tooltip）插件
ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件当您想要描述一个链接的时候,提示工具(Tool ...
Bootstrap 提示工具（Tooltip）插件
一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...
2016 正确 sublime安装PHPcs PHPcodesniffer代码规范提示插件，修正网上部分不详细描述
对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香!-------------------14:37 2016/3/212016 正确 sublime安装PHPcs PHPcodesniff ...
jQuery打造智能提示插件二（可编辑下拉框）
在上一篇 jQuery打造智能提示插件上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// ...
如何取消MSSQL自带智能提示步骤，使用第三方智能提示插件
步骤1如下: [工具]——[选项]——[文本编辑器]——[Transact-SQL]——[IntelliSense]——[Transact-SQL IntelliSense 设置]——(取消选择)—— ...
自己写的一个简单的jQuery提示插件
代码: /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = &qu ...
jQuery Label Better – 友好的表单输入框提示插件
jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...
PNotify – 简单易用的 JS 通知，消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

随机推荐

基于VC的声音文件操作(二)
(二)VC的声音操作操作声音文件,也就是将WAVE文件打开获取其中的声音数据,根据所需要的声音数据处理算法,进行相应的数学运算,然后将结果重新存储与WAVE格式的文件中去:可以使用CFILE类来实现 ...
Excel表3级数据整理工具
前言做专题经常会遇到做数据级联的需求,大部分需求都长一个模样.销售给你一个excel表,然后你做一个省市经销商的级联.不知道以前大家是怎么样做的,我之前是把excel复制到sublime中,然后使用 ...
LDO-BD00C0AWFP
BD00C0AWxx 1.该产品是ROHM公司的一款高输入电压可达26.5V,输出电压可达15V,输出电流1A的LDO.具有较低的ESR Capacitor. 2.输入电压变化4-26.5V,输出3 ...
RabbitMQ 连接断开处理-自动恢复
Rabbitmq 官方给的NET consumer示例代码如下,但使用过程,会遇到connection断开的问题,一旦断开,这个代码就会报错,如果你的消费者端是这样的代码的话,就会导致消费者挂掉. u ...
高手速成android开源项目【blog篇】
主要介绍那些乐于分享并且有一些很不错的开源项目的个人和组织.Follow大神,深挖大神的项目和following,你会发现很多. 一.个人 JakeWharton 就职于SquareGithub地址: ...
从配置sublimeClang插件中学到的
1.不害怕失败的关键在于要事先为失败准备补救措施.2.人们害怕内部结构复杂的东西出错,并以自己缺乏对内部结构的认识为理由而放弃查错.其实某些情况下根本无需对内部结构有多么深入的认识,只需从外部观察就够 ...
Lingo 做线性规划 - DEA
Reference: <An Introduction to Management Science Quantitative Approaches to Decision Making, Rev ...
OS——进程简答题(1)
1,叙述进程和程序的主要区别. 解:进程和程序是两个既有联系又有区别的两个概念,它们的主要区别如下: (1)程序是指令的有序集合,其本身没有任何运行的含义,它是一个静态的概念.而进程是程序在处理机上的 ...
Hibernate 的saveOrUpdate方法（转）
hibernate提供了saveOrUpdate的方法来进行数据库的操作.hibernate会根据对象的状态决定是insert还是update,其根本是通过xml文件中unsaved-value来确定 ...
GCD使用dispatch_semaphore_t创建多线程网络同步请求
一.简介: dispatch_semaphore_t:表示信号,生成信号的方法是 dispatch_semaphore_t semaphore= dispatch_semaphore_create(0 ...

tooltip提示插件

tooltip提示插件的更多相关文章

随机推荐

热门专题