当前位置:首页 > 编程教程 > jQuery技术文章 > Jquery实现自定义tooltip示例代码

详解使用Jquery实现自定义tooltip

  • 发布时间:
  • 作者:码农之家
  • 点击:199

这篇文章主要知识点是关于Jquery、tooltip、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Bootstrap与jQuery UI框架设计
  • 类型:jQuery大小:180 MB格式:PDF作者:肖睿//吴振宇
立即下载

Jquery实现自定义tooltip示例代码

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>

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.783327

jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析

类似的文章已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。jquery.validate就不用说了,目前比较流行的前端校验组件;jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc,微软自己写的,NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安装,具体怎么用请继续往下看。 首先在后台我们定义实体类: /// summary/// 厂家信息/// /summarypublic class Manufacturer : OperatedModel{ [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int ID { get; set; } /// summary /// 信用代码/注册号 /// /summary [Required(ErrorMessage = "信用代码/注册号不能为空")] [MaxLength(30)] public string EnterpriseNo { get; set; } /// summary /// 企业名称……

网友NO.203011

基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次)。我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景;后来我找到了jquery.validate,我发现这个框架还挺好的,因为它只提供校验机制,但是不提供特定校验的交互,有比较多的自定义的空间。在校验风格方面,有很多的形式,可以通过颜色,边框,动画,文本显示,弹框等多种方式来产生交互,至于要用哪种,就由需……

网友NO.448496

jQuery实现ToolTip元素定位显示功能示例

本文实例讲述了jQuery实现ToolTip元素定位显示功能的方法。分享给大家供大家参考,具体如下: !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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title无标题页/titlescript type="text/javascript" src="jquery-1.4.2.min.js" /scriptscript type="text/javascript" function ShowTip(event,obj,message) { var xOffset = -10; // x distance from mouse var yOffset = 10; // y distance from mouse //obj.style.top = (event.clientX + yOffset)+"px"; //obj.style.left = (event.clientY + xOffset)+"px"; //获取元素width: $(obj).width(); //获取元素height:$(obj).height() //获取元素位置:$(obj).position().top和$(obj).offset().top $('body').append( 'div id="tipmessage"'+message+'/div'); $('div#tipmessage').css("top", $(obj).position().top+$(obj).height() + "px").css("left", $(obj).positio……

网友NO.275357

jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法。分享给大家供大家参考,具体如下: 运行效果截图如下: index.html页面: !DOCTYPE htmlhtml lang="en"headtitlejQuery Tooltips悬停文字提示框效果/titlemeta charset="utf-8" /link rel="stylesheet" type="text/css" href="css/tooltipster.css" /link rel="stylesheet" type="text/css" href="css/style2.css" /script type="text/javascript" src="js/jquery-2.0.0.min.js"/scriptscript type="text/javascript" src="js/jquery.tooltipster.js"/scriptscript type="text/javascript" $(document).ready(function() { $('.tooltip').tooltipster(); });/script/headbodybrbrbrbrbrbrbrbrsection id="facebook"ula href="//www.jb51.net/" target="_blank"span id="fackbook" class="tooltip" title="jb51.net"jb51.net/span/a/ul/sectionsection id="twitter"ul a href="//www.jb51.net/" target="_blank"span id="twitter-default" class="tooltip" title="JS脚本代码"JS脚本代码/span/a/ul/sectionsection id="google"ul a href="……

网友NO.673143

jQuery Tools tooltip使用说明

HTML !DOCTYPE html html head titlejQuery Tools standalone demo/title !-- include the Tools -- script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"/script link rel="stylesheet" type="text/css" href="./tooltip-generic.css"/ style #myform { border:1px outset #ccc; background:#fff repeat-x; padding:20px; margin:20px auto; width:350px; font-size:12px; -moz-border-radius:4px; } #myform h3 { text-align:center; margin:0 0 10px 0; } /* http://www.quirksmode.org/css/forms.html */ #inputs label, #inputs input, #inputs textarea, #inputs select { display: block; width: 150px; float: left; margin-bottom: 20px; } #inputs label { text-align: right; width: 75px; padding-right: 20px; } #inputs br { clear: left; } /style /head bodyform id="myform" action="#" h3Registration Form/h3 div id="inputs" !-- username -- label for="username"Username/label input id="username" title="Must be at least 8 characters."/ br / !-- password -- label for="password"Password/label input id="password" type="p……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com