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提示框可以显示 ...
随机推荐
- ubuntu 下安装 matplotlib
直接使用sudo easy_install matplotlib 报错 ================================================================ ...
- java处理Excel文件---excel文件的创建，删除，写入，读取
这篇文章的代码是我封装的excel处理类,包含推断excel是否存在,表格索引是否存在,创建excel文件,删除excel文件,往excel中写入信息,从excel中读取数据. 尤其在写入与读取两个方 ...
- The Swift Programming Language中国完整版
近来的ios的swift语言似乎火了.我没有objectc基金会,但在此之前有c随着java在...的基础上.从几天开始学习ios的swift语言,晚发表在博客形式.下面是英文版本翻译swif图书.还 ...
- 一张地图告诉你，只JavaScript不够！
这将是JavaScript语法,你真的会一JavaScript嘛.看看这个图片!超好用JavaScript一本书的摘录游.熊儿.快去学习! 版权声明:本文博客原创文章.博客,未经同意,不得转载.
- Node.js 开发指南笔记
第一章:node简介 介绍了node是什么:node.js是一个让javascript运行在服务器端的开发平台, node能做些什么:[书上的] 具有复杂逻辑的网站 基于社交网络的大规模Web应用 W ...
- ExtJs在disabled和readOnly美学分析
ExtJs中disabled和readOnly美观度的分析 ExtJs中.假设设置输入框为仅仅读属性,一般第一考虑的都是readonly=true 它的效果和正常输入框一样,可是不同意输入: 然而,它 ...
- 第16章 观察者模式（Oberver Pattern）
原文 第16章 观察者模式(Oberver Pattern) 观察者模式 概述: 在软件构建过程中,我们需要为某些对象建立一种“通知依赖关系” ——一个对象(目标对象)的状态发生改变,所有的依 ...
- 《代码的第一行——Android》封面诞生
<代码的第一行--Android>已经上市近一个月,现在的情况是相当不错的销售,也特别感谢众多朋友的支持. 其实一本好书,假设你想卖.除了给予外力所要求的内容.封面设计是至关重要的,这本书 ...
- cocos2d-x-3.1 经常使用宏 (coco2d-x 学习笔记五)
在代码中使用这些宏,能够降低敲键盘的次数,从而提高编写效率. 与节点属性(property)相关的 CC_PROPERTY_READONLY CC_PROPERTY_READONLY_PASS_BY_ ...
- PHP移动互联网的发展票据（6）——MySQL召回数据库基础架构[1]
原文地址 :http://www.php100.com/html/php/api/2014/0326/6707.html 一.数据类型 1.整型 数据类型 存储空间 说明 取值范围 TINYINT 1 ...