Tooltip浮动提示框效果（掌握里面的小知识）
使用原生JavaScript设计和实现Tooltip浮动提示框特效，了解代码简化、事件绑定、事件冒泡等技巧和知识。
特效四个关键点：
显示：鼠标移到ToolTip超链接上时，ToolTip提示框可以显示出来
隐藏：鼠标移开时，ToolTip提示框自动隐藏
定位：ToolTip提示框的位置需要根据ToolTip超链接的位置来设置
可配置：ToolTip提示框可以根据参数不同，改变尺寸和显示内容
注意点：1）border-radius和 box-shadow兼容写法
2）不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
3）W3C规定不允许内联元素嵌套块级元素 ，其中的a链接嵌套了div，可能不符合W3C标准( tip：他是移入a链接的时候在a链接中创建的div )
简单的函数封装写法（便于引用，缩短代码量）：
1)通过元素的id获得元素的DOM引用
var $ = function(id){
return document.getElementById(id);
}
2)绑定事件的函数
function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数
if(obj.addEventListener){ //非IE，支持冒泡和捕获
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE，只支持冒泡
obj.attachEvent('on'+event,fn);
}
}
效果如图：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{
font-size: 14px;
line-height: 1.8;
background: url("img/bg.jpg") no-repeat center top;
font-family: "微软雅黑";
}
#demo{
width: 500px;
margin: 30px auto;
padding: 20px 30px;
position: relative;
background-color: #fff;
border-radius: 10px;
-moz-border-radius: 10px;/*这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性*/
-webkit-border-radius: 10px;/*苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核*/
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
#demo h2{
color: #03f;
}
#demo .tooltip{
color: #03f;
cursor: help;
}
.tooltip-box{
display: block;
background: #fff;
line-height: 1.6;
border: 1px solid #66CCFF;
color: #333;
padding: 20px;
font-size: 12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
overflow: auto;
}
#mycard img{
float: left;
width: 100px;
height: 100px;
padding: 10px;
}
#mycard p{
float: left;
width: 150px;
padding: 0 10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//绑定事件的函数
function addEvent(obj,event,fn){ //要绑定的元素对象，要绑定的事件，触发的回调函数
if(obj.addEventListener){ //非IE，支持冒泡和捕获
obj.addEventListener(event,fn,false);
}else if(obj.attachEvent){ //IE，只支持冒泡
obj.attachEvent('on'+event,fn);
}
}
//通过用户代理的方式判断是否是IE的方法，不能判断出IE11
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
var $ = function(id){
return document.getElementById(id);
}
var demo = $("demo");
//obj - ToolTip超链接元素
//id - ToolTip提示框id
//html - ToolTip提示框HTML内容
//width - ToolTip提示框宽度（可选）
//height - ToolTip提示框高度（可选）
function showTooltip(obj,id,html,width,height){
if($(id)==null){
//创建 <div class="tooltip-box" id="xx">xxxxxxxx</div>
var toolTipBox;
toolTipBox = document.createElement('div');
toolTipBox.className = "tooltip-box";
toolTipBox.id = id;
toolTipBox.innerHTML = html;
obj.appendChild(toolTipBox);
toolTipBox.style.width = width ? width + 'px':"auto";
toolTipBox.style.height = height ? height + 'px':"auto";
if(!width && isIE){
toolTipBox.style.width = toolTipBox.offsetWidth;//因为IE不支持auto属性
}
toolTipBox.style.position = 'absolute';
toolTipBox.style.display = 'block';
var left = obj.offsetLeft;
var top = obj.offsetTop + 20;
//当浏览器窗口缩小时不让提示框超出浏览器
if(left + toolTipBox.offsetWidth > document.body.clientWidth){
var demoLeft = demo.offsetLeft;
left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
if(left < 0)
left = 0;
}
toolTipBox.style.left = left + 'px';
toolTipBox.style.top = top + 'px';
addEvent(obj,"mouseleave" ,function(){
setTimeout(function(){
$(id).style.display = 'none';
},300);
});
}
else{
//显示
$(id).style.display = 'block';
}
}
//事件冒泡
addEvent(demo,'mouseover',function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
if(target.className == "tooltip"){
var _html;
var _id;
var _width = 200;
switch (target.id){
case "tooltip1":
_id = "t1";
_html = "中华人民共和国";
break;
case "tooltip2":
_id = "t2";
_html = "美国篮球职业联赛";
break;
case "tooltip3":
_id = "t3";
_html = "<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>";
_width = 100;
break;
case "tooltip4":
_id = "t4";
_html = "<img src='img/1.jpg' width='500' /> ";
_width = 520;
break;
case "tooltip5":
_id = "t5";
_html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>";
_width = 300;
break;
case "tooltip6":
_id = "t6";
_html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>";
_width = 500;
break;
}
showTooltip(target,_id,_html,_width);
}
});
/* var t1 = $("tooltip1");
var t2 = $("tooltip2");
var t3 = $("tooltip3");
var t4 = $("tooltip4");
var t5 = $("tooltip5");
var t6 = $("tooltip6");
t1.onmouseenter = function () {
showTooltip(this, "t1", '中华人民共和国', 200);
};
t2.onmouseenter = function () {
showTooltip(this, "t2", '美国篮球职业联赛', 200);
};
t3.onmouseenter = function () {
showTooltip(this, "t3", '<h2>春晓</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>', 100);
};
t4.onmouseenter = function () {
showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520);
};
t5.onmouseenter = function () {
var _html = '<div id="mycard"><img src="img/2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
showTooltip(this, "t5", _html, 300);
};
t6.onmouseenter = function () {
var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>'
showTooltip(this, "t6", _html, 500);
};*/
}
</script>
<body>
<div id="demo">
<h2>原生JavaScript实现ToolTip效果</h2>
<p>ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
比如简称文字显示一行文字全称，例：<a class="tooltip" id="tooltip1">中国</a>， <a class="tooltip" id="tooltip2">NBA</a>。
又比如显示一段文字，例：唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么？如果不看tooltip提示你背不出来的话，那么你
可要加油了。
</p>
<p>
ToolTip效果还可以用来显示图片，例：<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下，例：
<a class="tooltip" id="tooltip5">我的资料</a>。
</p>
<p>
甚至你可以显示一整个网站：例：<a class="tooltip" id="tooltip6">慕课网</a>。
</p>
<p>
注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。
</p>
</div>
</body>
</html>
Tooltip浮动提示框效果（掌握里面的小知识）的更多相关文章
- tip浮动提示框
今天工作中碰到要弹出tip浮动提示框,如服务器控件的ToolTip属性. 通过GOOGLE搜到了一个很好用的tip浮动提示框:TipTip jQuery Plugin. 例子如下: <!DOCT ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- WPF提示框效果
WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- 基于JQuery 的消息提示框效果代码
提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...
- 单一按钮显示/隐藏&&提示框效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS组件系列——Bootstrap寒冬暖身篇：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
- Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
随机推荐
- CDOJ 1273 God Qing's circuital law
暴力枚举+idea.做的时候mod写错了,写成了1000000009,找了两个多小时才发现...... a[1],a[2],a[3]....a[N] b[1],b[2],b[3]....b[N] 首先 ...
- Extraordinarily Tired Students UVA - 12108
不知道叫什么,好像是模拟的方法,看懂了题就好办(英语硬伤←_←) 题意大概是当一个同学想睡觉的时候判断周围睡觉的人数,不睡的人数大于等于睡觉的话就死撑着,否则就睡觉. 一开始没有什么思路,就直接用了个 ...
- mustache.js使用基本（二）sections
作者:zccst 本文记录基本使用二,主要讲sections. {{#person}} {{/person}} 1,当person是null, undefined, false, 0, NaN, &q ...
- laravel5 html引用问题
1. Composer 安装 编辑 composer.json 文件, require 节点下增加: "illuminate/html": "~5.0" 然后 ...
- iOS开发——NSDate（待续...）
1.获取当前系统时间,毫秒级 - (void)viewDidLoad { [super viewDidLoad]; NSString *currentTime = [self getCurrentTi ...
- JNI介绍（转）
源:JNI介绍 JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官在运行Java代码的An ...
- RoundedImageView使用吐槽心得(RoundedImageView与Glide加载图片,第一次加载无法圆角问题)
最近使用的时候发现一个问题, RoundedImageView与Glide搭配使用的时候,第一次加载图片(内存中没有),后图片无法圆角,后来尝试各种改,最后想到了一个办法,就是让Glide加载图片的 ...
- C++中的IO流
一,标准输入流 1.基本功能(头文件为iostream) char ch = cin.get();// 一次读取一个字符,如果遇到EOF则结束. cin.getline(buf,length);// ...
- Python dir()函数
您可以使用内置的dir()函数列出一个定义对象的标识符.例如,对于一个模块,包括在模块中定义的函数,类和变量. 当你给dir()提供一个模块名字时,它返回在那个模块中定义的名字的列表.当没有为其提供参 ...
- 环信 之 iOS 客户端集成三：基础功能
SDK中,大部分与网络有关的操作,都有三种方法: 同步方法 通过delegate回调的异步方法.要想能收到回调,必须要注册为:[[EaseMob sharedInstance].chatManager ...