javascript tooltip_anjile1234567890的博客-程序员宅基地

技术标签: ViewUI  javascript  

 转自http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/

 

 

 

var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 20;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h;
 var ie = document.all ? true : false;
 return{
  show:function(v,w){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + 'cont');
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;
   tt.style.width = w ? w + 'px' : 'auto';
   if(!w && ie){
    t.style.display = 'none';
    b.style.display = 'none';
    tt.style.width = tt.offsetWidth;
    t.style.display = 'block';
    b.style.display = 'block';
   }
  if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
  h = parseInt(tt.offsetHeight) + top;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();

 

 

 

 

#tt {
 position:absolute;
 display:block;
 background:url(images/tt_left.gif) top left no-repeat;
 }
 #tttop {
 display:block;
 height:5px;
 margin-left:5px;
 background:url(images/tt_top.gif) top right no-repeat;
 overflow:hidden;
 }
 #ttcont {
 display:block;
 padding:2px 12px 3px 7px;
 margin-left:5px;
 background:#666;
 color:#fff;
 }
#ttbot {
display:block;
height:5px;
margin-left:5px;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden;
}

 

使用:

οnmοuseοver="tooltip.show('Testing  123 ', 200);"
οnmοuseοut="tooltip.hide();"
 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/anjile1234567890/article/details/84290754

智能推荐

java获取微信用户源码_JAVA微信公众号网页开发 —— 用户授权获取openid和用户微信信息..._ysl冰蓝的博客-程序员宅基地

packagecom.test;importjava.io.BufferedReader;importjava.io.IOException;importjava.io.InputStreamReader;importjava.io.OutputStreamWriter;importjava.net.MalformedURLException;importjava.net.URI;importja...

mysql数据库中的qps_mysql数据库中如何统计QPS脚本_西门胖子的博客-程序员宅基地

mysql数据库中如何统计QPS脚本发布时间:2020-05-15 16:09:51来源:51CTO阅读:124作者:三月栏目:数据库下面讲讲关于mysql数据库中如何统计QPS脚本,文字的奥妙在于贴近主题相关。所以,闲话就不谈了,我们直接看下文吧,相信看完mysql数据库中如何统计QPS脚本这篇文章你一定会有所受益。#!/bin/bashmysqladmin -uroot-p'xxxx' ext...

Opencv学习笔记(一)_码农潘少的博客-程序员宅基地

什么是OpenCVOpenCV是一个开源的计算机视觉库,可以从http://opencv.org获取。OpenCV库用C和C++语言编写,可以在Windows、Linux、MacOS等系统运行。同时也积极开发Python、Java、Matlab以及其他一些语言的接口。从Git获取最新的OpenCV在Windows上,如果想要从Git获取OpenCV最新版本,你需要访问https://gitbub.com/opencv/opencv.git在linux上,只需要输入如下指令:git clone ht

[Unity框架]PureMVC基础_YZH8888886的博客-程序员宅基地

PureMVC框架下载:http://puremvc.github.io/而github上的有很多都是不需要的,所以也可以直接下载简化版的(c#):http://pan.baidu.com/s/1bcYgfc官方文档:http://puremvc.org/component/option,com_wrapper/Itemid,183/核心层(单例):

python开发环境的搭建用eclipse_eclipse 搭建 Python 开发环境_蝶恋花 13319120387的博客-程序员宅基地

亲自搭建eclipse Python开发环境过程,在此记录下来编辑器: Eclipse + pydev插件1. Eclipse是写JAVA的IDE, 这样就可以通用了,学习代价小。 学会了Eclipse, 以后写Python或者JAVA 都可以。2. Eclipse, 功能强大。3. Eclipse跨平台, 可以在Mac上和Windows运行安装Python下载地址:http://www.p...

安装Java的步骤_普通网友的博客-程序员宅基地

Spring Security观后感——手绘思维脑(供参考)手绘的思维导图,是我自己根据自身的情况读完这套阿里出品的Spring Security王者晋级文档之后所绘的,相当于是一个知识的总结与梳理,我将其分为“核心组件”与“工作原理/认证流程”。Spring Security王者晋级文档-Spring Security 4.2内部资料Spring Security 4.2内部资料——主要专注于企业级 Java 安全的研究,尤其是 Spring Security。因此,我们的一切内容会以 Ja

随便推点

android编程root启动指定app,取之有道——巧用Root权限 启动其他APP中的Activity_weixin_40003451的博客-程序员宅基地

取之有道——巧用Root权限 启动其他APP中的Activity2019年01月29日|萬仟网移动技术 |我要评论这次博主来分享一个很巧妙的办法来启动其他APP中Activity的方法。 首先说一下这样做的目的:最近博主在攻克一个技术难点,就是搞定某些三方系统中,对于应用权限的限制。为此给出用户指导,引导用户启动系统中的权限设置来设置信任。到此,...

python读取压缩文件mat件mat文件_从压缩文件读取matlab文件(*.mat),而不解压缩到Python中的目录..._weixin_39946364的博客-程序员宅基地

这个特定的问题源于试图处理由MATLAB算法生成的大数据集,以便我可以用python算法处理它们。在背景:我在MATLAB中有大数组(通常是20x20x40x15000[I,j,k,frame]),我想在python中使用它们。因此,我将数组保存到*.mat文件中,并使用scipy.io.loadmat(fname)将*.mat文件读入numpy数组。但是,如果我试图用python加载整个*.ma...

java swing做输入框,java Swing 文本框的使用_不懂战国的博客-程序员宅基地

/*** Java Swing 文本框控件* @author gao*/package com.gao;import java.awt.GridLayout;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing.JPanel;import javax.swing.JTextField;import javax....

2021年茶艺师(中级)报名考试及茶艺师(中级)考试技巧_童话小镇(王雅丽)的博客-程序员宅基地

题库来源:安全生产模拟考试一点通公众号小程序安全生产模拟考试一点通:茶艺师(中级)报名考试根据新茶艺师(中级)考试大纲要求,安全生产模拟考试一点通将茶艺师(中级)模拟考试试题进行汇编,组成一套茶艺师(中级)全真模拟考试试题,学员可通过茶艺师(中级)考试技巧全真模拟,进行茶艺师(中级)自测。1、【单选题】泡茶水温的高低,与茶的老嫩、条形松紧有关。茶叶原料粗老、紧实要比细嫩、松散的茶汁浸出要( )得多,所以冲泡水温要( )。(D)A、快、低B、快、高C、慢、低D、慢、高2...

超详细,新手都能看懂 !使用SpringBoot+Dubbo 搭建一个简单的分布式服务_weixin_34384681的博客-程序员宅基地

Github 地址:https://github.com/Snailclimb/springboot-integration-examples ,欢迎各位 Star。目录:使用 SpringBoot+Dubbo 搭建一个简单分布式服务实战之前,先来看几个重要的概念什么是分布式?什么是 Duboo?Dubbo 架构什么...

softmax_再见鲁鲁修的博客-程序员宅基地

可以参考:https://blog.csdn.net/qian99/article/details/78046329第一篇博客中将损失函数定义为下面的会更加容易理解:将 定义成: 或者: 关于损失函数的求导问题:损失函数的求导目标是 : ...