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 相关文章推荐
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
Angular 应用技巧总结
Sep 14 Javascript
javascript中的隐式调用
Feb 10 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php绘制圆形的方法
2015/01/24 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
python中的sort方法使用详解
2014/07/25 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
学习委员自我鉴定
2014/01/13 职场文书
高中生物教学反思
2014/02/05 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
入党政审材料范文
2014/12/24 职场文书
工作经验交流材料
2014/12/30 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android