自己定义html中a标签的title提示tooltip

简单介绍

用简单的jquery+CSS创建自己定义的a标签title提示。用来取代浏览器默认行为。如图:

Javascript代码

$(function() {$("a[title]").each(function() {var a = $(this);var title = a.attr('title');if (title == undefined || title == "") return;a.data('title', title).removeAttr('title').hover(function () {var offset = a.offset();var aWidth = a.outerWidth();var aHeight = a.outerHeight();var left = offset.left + a.outerWidth() + 1;var top = offset.top + aHeight + 10;var maxTop = $(document).outerHeight() + $(document).scrollTop()-54;top = top > maxTop ?

maxTop : top; if (left > window.innerWidth - aWidth) { left = offset.left + (aWidth > 200 ?

aWidth / 2 : 0); } $("<div id=\"anchortitlecontainer\"></div>").appendTo($("body")).html(title).css({top:top,left:left}).fadeIn(function () { var pop = $(this); setTimeout(function () { pop.remove(); }, pop.text().length*80); }); }, function() { $("#anchortitlecontainer").remove(); } ); }); });

(最后更新2014/5/27)

别忘记引用JQuery。
代码中setTimeout(function () { pop.remove(); }, pop.text().length*80);是依据title长度计算提示时间,用来防止太短的title提示过长或太长的title提示过短。

CSS代码

#anchortitlecontainer {position: absolute;z-index: 5999;border: solid 1px #315B6C;padding: 5px;color: #315B6C;background: none repeat scroll 0 0 #FFFFFF;border-radius: 5px;display: none;
}
#anchortitlecontainer:before {position: absolute;bottom: auto;left: -1px;top: -15px;border-color: transparent transparent transparent #315B6C;border-style: solid;border-width: 15px;content: "";display: block;width: 0;
}
#anchortitlecontainer:after {position: absolute;bottom: auto;left: 0px;top: -13px;border-color: transparent transparent transparent #FFFFFF;border-style: solid;border-width: 15px;content: "";display: block;width: 0;
}

使用一些CSS3的特性,回避使用图片。
不是CSS高手,调出这个样式着实花了一些时间,假设有人能用上,那就是我的荣幸了。:)

转载于:https://www.cnblogs.com/gcczhongduan/p/5178598.html

自己定义html中a标签的title提示tooltip相关推荐

  1. html php 混编 H1,在一个HTML中h1标签能出现几次?h1标签和标题标签的差别是什么?...

    本篇文章主要介绍了关于HTML h1标签的一些解释,有html h1标签和html title标签的区别,还有网页中h1标签和title标签与SEO优的区别,还有一个小问题就是h1标签在一个网页能出现 ...

  2. html中可以有两个h1,在一个HTML中h1标签能出现几次?h1标签和标题标签

    首页 > web前端 > html教程 > 正文 在一个HTML中h1标签能出现几次?h1标签和标题标签的差别是什么? 2018-08-29 10:57:28 本篇文章主要介绍了关于 ...

  3. html中dir标签的作用是什么意思,htmldir标签是干啥的?dir标签的具体定义和属性介绍...

    本篇文章主要的为大家讲述的就是html dir标签的定义和html dir标签的compact属性的介绍, html dir标签的定义: HTML 目录列表: HTML XHTML CSS html ...

  4. vue修改meta值_vue中动态设置meta标签和title标签的方法

    vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...

  5. html5定义页脚的标签,HTML中footer标签的使用方法

    HTML中footer标签的使用方法 发布时间:2020-06-25 17:37:52 来源:亿速云 阅读:215 作者:Leah 本篇文章为大家展示了HTML中footer标签的使用方法,代码简明扼 ...

  6. Html 标签中的Alt和Title

    Html 标签中的Alt和Title Alt和Title都是提示性语言标签,注意其区别. 在我们浏览网页时,当鼠标停留在图片对象或文字链接上时,在鼠标的右下角有时会出现一个提示信息框.对目标进行一定的 ...

  7. 修改html中meta标签,利用JS或JQuery修改网页title和meta标签的content内容

    这篇文章主要为大家详细介绍了利用JS或JQuery修改网页title和meta标签的content内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 网页的ti ...

  8. 在html中定义有序列表的标签为,HTML列表标签

    表格是用来展示数据的,那么列表就是用来布局的 列表的最大特点是整齐整洁有序,他作为布局是非常自由和方便. 分类:无序列表 有序列表 自定义列表 1.无序列表(最重要) 标签表示HTML页面中项目的无序 ...

  9. 关于img标签中的alt和title属性作用的说明

    在img标签中有title和alt两个属性值. 其中alt属性是指图片的替换文本,主要有两个作用: ①当根据路径找不到该图片时,作为替换文本出现,不同的浏览器显示形式不一样. ②通过alt 可以让搜索 ...

最新文章

  1. windows mobile设置插移动卡没反应_ipad pro外接移动硬盘ipados
  2. python测试用例图_pytest以函数形式的测试用例
  3. 跳一跳python源码_使用Python实现跳一跳自动跳跃功能
  4. php导出excel失败原因,PHPExcel导出Excel文件报找不到该文件错误
  5. linux自动挂载fcoe存储,在sdb上挂载USB 设备
  6. PHP通过OpenSSL生成证书、密钥并且加密解密数据,以及公钥,私钥和数字签名的理解...
  7. iOS App之间的通信方式
  8. python的下划线
  9. 解决Linux环境下idea、webstorm等编辑器中文无效
  10. 基于国产处理器架构的高能物理数据处理系统
  11. 不知道浏览器怎么清除缓存?各种浏览器清理缓存的方法
  12. 高速光通信-调制概述
  13. Django笔记十一之外键查询优化select_related和prefetch_related
  14. Java 中Lambda表达式的使用详解
  15. Python实战项目:代码秒抢红包详解
  16. JAVA的jdk1.8中文文档
  17. 爬山法求解八皇后问题的全部解法
  18. 技术VC=技术+VC?技术VC公司如何生存?
  19. SpringBoot使用@Slf4j注解
  20. PHP获取每个周五或周一的日期

热门文章

  1. Linux Shell Record
  2. java并发编程之缓存一致性问题
  3. Android中DisplayMetrics 获取手机屏幕分辨率
  4. Standard Deviation Normal Distribution
  5. 数据存储与传输---编码与解码---硬盘和内存要分清!
  6. 屏幕录像软件Bandicam和oCam
  7. 《老马的职业“鬼”话》 马华兴著
  8. undefinednbsp;referencenbsp;to…
  9. mac下svn常用命令
  10. 几个ASP.NET小技巧