Jquery实现自定义tooltip示例代码


Posted in Javascript onFebruary 12, 2014

Jquery实现自定义tooltip,具体代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
#tooltip 
{ 
position:absolute; 
border:1px solid #333; 
background:#f7f5d1; 
padding:1px; 
color:#333; 
display:none; 
} 
</style> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function () { 
var x = 10; //tooltip偏移鼠标的横坐标 
var y = 20; //tooptip偏移鼠标的纵坐标 
var myTitle; 
//1. 鼠标移至新闻,去掉系统默认的tooltip,自定义tooltip 
//2. 鼠标移出新闻,还原系统默认的tooltip,移除自定义的tooltip 
//3. 鼠标在新闻上移动,设置自定义的tooltip的位置 
$("a.tooltip").mouseover(function (e) { 
myTitle = this.title; 
this.title = ""; 
var tooltip = "<div id='tooltip' style='background:lightblue;'>" + myTitle + "</div>"; 
$("body").append(tooltip); 
$("#tooltip").css({ 
"top": (e.pageY + y) + "px", 
"left": (e.pageX + x) + "px" 
}).show("fast"); 
}).mouseout(function () { 
this.title = myTitle; 
$("#tooltip").remove(); 
}).mousemove(function (e) { 
$("#tooltip").css({ 
"top": (e.pageY + y) + "px", 
"left": (e.pageX + x) + "px" 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div class="scrollNews" > 
<ul> 
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> 
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li> 
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li> 
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li> 
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li> 
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> 
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li> 
</ul> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
深入了解javascript 数组的sort方法
Jun 01 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 #Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 #Javascript
利用jquery写的左右轮播图特效
Feb 12 #Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 #Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 #Javascript
Javascript写入txt和读取txt文件示例
Feb 12 #Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 #Javascript
You might like
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python的gevent框架的入门教程
2015/04/29 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python 防止死锁的方法
2020/07/29 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
军训心得体会
2013/12/31 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
初中军训感想300字
2014/03/05 职场文书
安全生产目标责任书
2014/04/14 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android