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提示框可以显示 ...
随机推荐
- GDI+学习笔记（六）渐变画笔
刷,顾名思义,它是一样的刷.提请设备,还记得常唱歌曲,"我是一个画家.." 好吧.跑题了. 本系列博客希望尽可能简单的描写叙述每项功能,而不希望把每一个參数都介绍的详具体细,假设须 ...
- SQL 将URL编码转汉字！
原文:SQL 将URL编码转汉字! -- ============================================= -- 作 者: ruijc -- 描 述: 将Url编码转明文字符 ...
- 在win8.1 64位系统+cocos2d-x2.2.3下搭建android交叉编译环境
搭建前须要下载的软件包(默认已搭建好cocos2d-x而且可在VS上执行,本人VS版本号为2013): 1:java 下载地址:http://www.java.com/zh_CN/download/m ...
- [git] fatal: This operation must be run in a work tree
正在使用git init --bare 它的成立裸仓库后,,正在使用git 其他命令将出现fatal:This operation must be run in a work tree 问题,途径: ...
- git fetch, merge, pull, push需要注意的地方（转）
在git操作中,我们经常会用到fetch, merge, pull和push等命令,以下是一些我们需要注意的地方. 给大家准备了参考资料: 1. Whatʼs a Fast Forward Merge ...
- （2）虚拟机下hadoop1.1.2集群环境搭建
hadoop集群环境的搭建和单机版的搭建差点儿相同,就是多了一些文件的配置操作. 一.3台主机的hostname改动和IP地址绑定 注意:以下的操作我都是使用root权限进行! (1)3太主机的基本网 ...
- Service与Activity与交流AIDL
深圳旅游月.终于回来了,做了很多个月,这些天来的东西会慢慢总结出来的.今天,我们正在谈论的Service小东西:沟通. 固定通信的做法比较,基本上按照写模板可以实现. 1.Service与Activi ...
- Python开发一个csv比较功能相关知识点汇总及demo
Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...
- 《STL源代码分析》---stl_list.h读书笔记
STL在列表list它是一种经常使用的容器.list不连续双向链表在内存,而且是环形. 理解列表如何操作的详细信息,然后.阅读STL名单上的代码是最好的方法. G++ 2.91.57.cygnus\c ...
- python_基础学习_03_正则替换文本（re.sub）
python的正则表达式模块是re,替换相关的方法是sub. 例如我们要做如下的替换将所有的 替换为空格,可以通过下面代码实现: import re input = 'hello world' #第一 ...