js实现tooltip动态提示效果（文字版）
页面中经常用到鼠标移动到一个元素上面显示提示的功能，最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div，比较麻烦。
针对上面个的需求，这边写了一个tooltip动态提示的效果，鼠标移动到元素上面动态展示，移除的时候直接删除，这样每次只生成一个div。代码可以传一个参数（dom元素），如果这个参数存在就相对于这个dom进行定位（这个元素必须为相对或者绝对 或者fixed（固定）定位）;
具体代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>tooltip</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
body,button,input,select,textarea {
font-family:'Microsoft YaHei',arial,SimSun,sans-serif,tahoma;
}
body{
-webkit-text-size-adjust:none;
}
input,select,textarea {
font-size:100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0 none;
}
iframe {
display:block;
}
abbr,acronym {
border:none;
font-variant:normal;
}
del {
text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
q:before,q:after {
content:'';
}
sub, sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sup {
top:-0.5em;
}
sub {
bottom:-0.25em;
}
ins,a {
text-decoration:none;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix{
*zoom:1;
}
.fl {
float:left;
}
.fr {
float:right;
}
.hidenone{
display:none;
visibility:hidden;
}
.hide{
visibility:hidden;
}
.mt10{
margin-top:10px;
}
.mt20{
margin-top:20px;
}
.ml10{
margin-left:10px;
}
.mr10{
margin-right:10px;
}
.pt10{
padding-top:10px;
}
.pl10{
padding-left:10px;
}
.pr10{
padding-right:10px;
}
.tc{
text-align:center;
}
/*表格样式开始*/
.common-table {
margin: 0px auto 10px;
width: 960px;
background: #fff;
text-align: center;
table-layout: fixed;
} .common-table-th {
height: 44px;
background: #F6F6F5;
border: 1px solid #E8E7E4;
font-size: 16px;
color: #333;
text-align: center;
vertical-align: middle;
text-overflow: ellipsis;
} .common-table-td {
border: 1px solid #dcdcdc;
color: #666;
font-size: 14px;
line-height: 50px;
} .common-table-tbody {
margin: 5px auto 10px;
width: 1170px;
background: #fff;
text-align: center;
table-layout: fixed;
}
.th-work-name{
width: 27.6%;
}
.first-score,
.last-score,
.highest-score{
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
color: #00F;
text-align: center;
}
.common-table-td a:link,
.common-table-td a:visited {
color: #00F;
text-decoration: none;
}
/*表格样式结束*/ #pos_h_cread{
position: absolute;
z-index: 9999999;
border-radius: 5px;
width: 500px;
padding:10px;
background:rgba(0, 0, 0, 0.7);
background:#000\9;
filter:alpha(opacity=70);
}
#pos_h_cread span{
filter:alpha(opacity=70);
opacity:.7;
border-color: transparent transparent #000 transparent;
border-style: solid;
border-width: 0px 15px 10px 15px;
height: 0px;
width: 0px;
position:absolute;
top:-10px;
left:50px; }
#pos_h_cread p{
color:#fff;font-size:12px;line-height:18px;
}
</style>
</head>
<body style="height:3000px;">
<div id="a" style="padding:50px;background:#ff0;position:relative;">
<div id="b" style="padding:40px;background:#f00;position:fixed;">
<table id="examTable" class="common-table">
<tr>
<th class="common-table-th">序号</th>
<th class="common-table-th th-work-name">考试名称</th>
<th class="common-table-th">布置时间</th>
<th class="common-table-th">修改初始分</th>
<th class="common-table-th">修改终版分</th>
<th class="common-table-th">修改最高分</th>
<th class="common-table-th">修改次数</th>
</tr>
<tr>
<td class="common-table-td">1</td>
<td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td>
<td class="common-table-td">2016-06-01</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">0</td>
</tr>
<tr>
<td class="common-table-td">1</td>
<td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td>
<td class="common-table-td">2016-06-01</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">0</td>
</tr>
<tr>
<td class="common-table-td">1</td>
<td class="common-table-td ell tooltip" rel="张月华张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示张月华演示演示">张月华演示</td>
<td class="common-table-td">2016-06-01</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">
--
</td>
<td class="common-table-td">0</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
var tooltip = {
getpos:function(element,dom){
if ( arguments.length == 0 || element == null ) {
return null;
}
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while( element = element.offsetParent ) {
if(element == dom){
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
}
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
},
isSelector:function(){
return !! document.querySelector ? true : false;
},
init:function(dom){
var box = [];
if(this.isSelector()){
box = document.querySelectorAll('.tooltip');
}else{
var a = [];
var elm = document.getElementsByTagName('*');
var _l = elm.length;
for(var i=0;i<_l;i++){
if(/\s*tooltip\s*/.test(elm[i].className)){
a.push(elm[i]);
}
}
box = a;
}
for(var i=0;i< box.length;i++){
box[i].onmouseover = function(){
var _this = this;
var pos = tooltip.getpos(_this,dom);
var div = document.createElement('div');
var p = document.createElement('p');
var span = document.createElement('span');
var text = _this.getAttribute('rel');
p.innerHTML = text;
div.appendChild(p);
div.appendChild(span);
div.id = 'pos_h_cread';
div.style.left = pos.absoluteLeft + 'px';
div.style.top = (pos.absoluteTop + pos.offsetHeight)+ 'px';
if(dom){
dom.appendChild(div);
}else{
document.getElementsByTagName("body")[0].appendChild(div);
}
}
box[i].onmouseout = function(){
var n = document.getElementById('pos_h_cread');
if(n && n.parentNode && n.tagName != 'BODY'){
n.parentNode.removeChild(n);
}
}
}
}
}
tooltip.init(document.querySelector('#b'));
</script>
js实现tooltip动态提示效果（文字版）的更多相关文章
- JS仿Android Toast提示效果
注:这个需要jquery文件来提示支持,所以需要先调用Jquery. <script type="text/javascript" src="js/jquery.j ...
- CSS3特效----图片动态提示效果
需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...
- 原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- jQuery实现鼠标移到元素上动态提示消息框效果
当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- Unity3D基础学习 NGUI自带Tooltip制作提示文字
简介 NGUI自带的的例子Character中含有一个Tooltip,可以鼠标悬浮到某对象时显示提示文字.非常方便. 创建UITooltip 首先你需要在场景NGUi相机下建立一个空物体我把它命名为T ...
- Tooltip浮动提示框效果（掌握里面的小知识）
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...
随机推荐
- 跑ssis分组差错：没有关联“”。假设无法找到一个特定的连接元件,Connections 这种错误发生的收集
跑ssis分组差错:没有关联"".假设无法找到一个特定的连接元件,Connections 这种错误发生的收集. 在网上搜了一下,解决方法: 打开SqlServer Configur ...
- 使用Eclipse设定Android开发环境
使用Eclipse设定Android开发环境 花了大概几天的时间最终搭建好了开发Android的环境了! 我是使用Eclipse +ADT顺利地搭建Android开发环境的. 如今Google以及An ...
- HDOJ 3480 Division
斜率优化DP. ... 对数组排序后.dp[i][j]表示对前j个物品分i段的最少代价,dp[i][j]= min{ dp[i-1][k]+(a[k+1]-a[j])^2 }复杂度m*n^2 ...
- Spark里边：到底是什么RDD
RDD它是Spark基,它是最根本的数据抽象.http://www.cs.berkeley.edu/~matei/papers/2012/nsdi_spark.pdf 它开着RDD文件.假设英语阅读太 ...
- PYTHON单元测试
PYTHON开发入门与实战11-单元测试 1. 单元测试 本章节我们来讲讲django工程中如何实现单元测试,单元测试如何编写以及在可持续项目中单元测试的重要性. 下面是单元测试的定义: 单元测试是开 ...
- Linux网络编程——连接和面向连接的协议之间没有区别
网络编程中最重要的概念就是连接取向(connection-oriented)和无连接(connectionless)协议.虽然本质.两者之间的区别是不难理解,编程的人来说,却是个非常easy混淆的问题 ...
- Qt Quick 组件和动态创建的对象具体的解释
在<Qt Quick 事件处理之信号与槽>一文中介绍自己定义信号时,举了一个简单的样例.定义了一个颜色选择组件,当用户在组建内点击鼠标时,该组件会发出一个携带颜色值的信号,当时我使用 Co ...
- Ambari-部署文档
Ambari-server搭建过程 部署环境要求 操作系统:centos 5 或 centos 6 能够使用yum jdk版本号 1.7 官网安装教程 https://cwiki.apache.org ...
- Android两个注意事项.深入了解Intent和IntentFilter(两)
深入理解Intent和IntentFiler(二) 转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空) 在上一篇文章中,我们比較具体学习了&q ...
- crawler_Docker_解决用 JavaScript 框架开发的 Web 站点抓取
[转载,后续补上实践case] 有了 Docker,用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取 [编者的话]Prerender 服务能够为网络爬虫提供预先渲染的 ...