详解使用Jquery实现自定义tooltip

  • 时间:
  • 3270人关注

这篇文章主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下,另外这篇文章主要知识点是关于Jquery、tooltip、jQuery的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

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>

上一篇:jQuery与JSONP实现跨域访问的实例方法

下一篇:Javascript中封装window.open不兼容问题的处理方法

相关内容

  • 如何解决jquery的flexigrid无法显示数据提示获取到数据问题

    升级了IE10,发现flexigrid无法显示数据,提示获取到了数据,但没任何报错任何显示,经过试验和跟踪,修改如下,有类似问题的朋友可以参考下哈

    04-19jquery的flexigrid无法显示数据提示获取到数据

    阅读更多
  • Jquery瀑布流插件的技巧用法

    瀑布流布局在目前貌似很火爆,具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西

    01-23Jquery瀑布流插件使用介绍

    阅读更多
  • 实例分享提取jquery的ready()方法

    有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了

    02-26提取jquery的ready()方法单独使用示例

    阅读更多
  • 详解jQuery .attr()和.removeAttr()方法操作元素属性

    本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性,不会的朋友可以参考下哈,希望对大家有所帮助

    01-27jQuery .attr()和.removeAttr()方法操作元素属性示例

    阅读更多
  • jquery操作checked属性以及disabled属性的方法整理

    这篇文章主要介绍了jquery控制checked属性以及disabled属性的多种方法,下面只提到checked,其实disabled在jquery里的用法和checked是一模一样的,需要的朋友可以参考下

    06-15jquery操作checked属性以及disabled属性的多种方法

    阅读更多
  • JavaScript和jQuery实战手册

    JavaScript和jQuery实战手册

    JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

    大小:103 MBJavaScript

    点击下载
  • jQuery UI开发指南

    jQuery UI开发指南

    《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

    大小:6.02 MB前端开发

    点击下载
  • PHP与jQuery开发实例

    PHP与jQuery开发实例

    这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

    大小:9.8 MBPHP开发

    点击下载
  • 疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

    疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

    大小:131.7 MB前端开发

    点击下载
  • jQuery实战从入门到精通

    jQuery实战从入门到精通

    本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

    大小:189.1 MBjQuery

    点击下载
  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

    大小:99.0 MBjQuery

    点击下载
  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小:48.4 MBjQuery

    点击下载
  • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

    Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

    本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

    大小:167.1 MB前端开发

    点击下载
  • 锋利的jQuery

    锋利的jQuery

    《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

    大小:194.9 MBjQuery

    点击下载

学习笔记