最近遇到个需求，需要给很多的按钮等添加文字提示，风格要保持统一。

然后就写了如上的这个算是小插件吧  给出源代码的百度云盘链接

下面的代码直接使用只差jQuery的引入

[html] view plaincopy
  1. <!--
  2. write by chiring@2016.6.14
  3. 配置仅需要三步
  4. 1、为dom添加pop-title类，并添加自定义属性pop-title，值为你要显示的内容
  5. 2、添加一个id为titleTips的div
  6. 3、添加jquery，以及下面js中的代码
  7. PS:特色1、可以自定义样式，比较方便
  8. 2、显示的框框宽度可以根据文本自动调整
  9. -->
  10. <!DOCTYPE html>
  11. <html>
  12. <head>
  13. <meta charset="utf-8" />
  14. <title></title>
  15. <style type="text/css">
  16. #delay{
  17. width:700px;
  18. height:100px;
  19. background:black;
  20. color:white;
  21. font-family: "microsoft yahei";
  22. font-size: 20px;
  23. text-align: center;
  24. line-height: 100px;
  25. text-decoration: none;
  26. }
  27. #delay li{
  28. display: block;
  29. float:left;
  30. width:100px;
  31. box-sizing: border-box;
  32. border:1px solid white;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <ul id="delay">
  38. <li class="pop-title" pop-title="大家好，我是1号宝宝">1</li>
  39. <li class="pop-title" pop-title="大家好，我是1号">2</li>
  40. <li class="pop-title" pop-title="我是3号大傻">3</li>
  41. <li class="pop-title" pop-title="hi,我是shadow">4</li>
  42. <li class="pop-title" pop-title="钉钉">5</li>
  43. <li class="pop-title" pop-title="dicy">6</li>
  44. <li class="pop-title" pop-title="我是拉拉，波~">7</li>
  45. </ul>
  46. <div id="titleTips"></div>
  47. <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
  48. <script type="text/javascript">
  49. $(".pop-title").on("mouseover",function(){
  50. //获取选中元素的私有属性值
  51. var popValue = $(this).attr("pop-title");
  52. //获取元素左边距到窗口左边缘的距离
  53. var xAxis = $(this).offset().left;
  54. //获取元素上边距到窗口顶端的距离（这里减去了滚动条滚动的距离）
  55. var yAxis = $(this).offset().top-$(document).scrollTop();
  56. //获取当前元素的宽度与高度
  57. var domWidth = $(this).width();
  58. var domHeight = $(this).height();
  59. //计算要显示字符的字母个数（显示的框框要根据字符数自动设置宽度）
  60. var fontNumber = popValue.length;
  61. //设置每个字符所占据的像素长度
  62. var widthForSingleAlpha = 20;
  63. //鼠标移入的时候显示提示框。
  64. $("#titleTips").show();
  65. //设置文本框的样式以及坐标
  66. $("#titleTips").css({"position":"absolute",
  67. "width":fontNumber*widthForSingleAlpha+"px",/*自适应设置弹框宽度*/
  68. "height":"30px",
  69. "border":"1px solid grey",
  70. "background":"#FBEADC",
  71. "line-height":"30px",
  72. "text-align":"center",
  73. "border-radius":"5px",
  74. "font-family":"microsoft yahei",
  75. "font-size":"15px",
  76. "font-weight":"normal",
  77. "z-index":"100",
  78. "color":"black"
  79. });
  80. //set dom position
  81. $("#titleTips").css("top",(yAxis+domHeight+4)+"px");/*设置到顶端的距离*/
  82. var smallTipsWidth = $("#titleTips").width();/*获取弹框的宽度*/
  83. $("#titleTips").css("left",xAxis+domWidth/2-smallTipsWidth/2);/*根据弹框的宽度设置其到左端的距离*/
  84. $("#titleTips").text(popValue);/*设置显示的文字内容*/
  85. })
  86. $(".pop-title").on("mouseout",function(){
  87. $("#titleTips").hide();
  88. })
  89. </script>
  90. </body>
  91. </html>

最近遇到个需求，需要给很多的按钮等添加文字提示，风格要保持统一。

然后就写了如上的这个算是小插件吧  给出源代码的百度云盘链接

下面的代码直接使用只差jQuery的引入

[html] view plaincopy
  1. <!--
  2. write by chiring@2016.6.14
  3. 配置仅需要三步
  4. 1、为dom添加pop-title类，并添加自定义属性pop-title，值为你要显示的内容
  5. 2、添加一个id为titleTips的div
  6. 3、添加jquery，以及下面js中的代码
  7. PS:特色1、可以自定义样式，比较方便
  8. 2、显示的框框宽度可以根据文本自动调整
  9. -->
  10. <!DOCTYPE html>
  11. <html>
  12. <head>
  13. <meta charset="utf-8" />
  14. <title></title>
  15. <style type="text/css">
  16. #delay{
  17. width:700px;
  18. height:100px;
  19. background:black;
  20. color:white;
  21. font-family: "microsoft yahei";
  22. font-size: 20px;
  23. text-align: center;
  24. line-height: 100px;
  25. text-decoration: none;
  26. }
  27. #delay li{
  28. display: block;
  29. float:left;
  30. width:100px;
  31. box-sizing: border-box;
  32. border:1px solid white;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <ul id="delay">
  38. <li class="pop-title" pop-title="大家好，我是1号宝宝">1</li>
  39. <li class="pop-title" pop-title="大家好，我是1号">2</li>
  40. <li class="pop-title" pop-title="我是3号大傻">3</li>
  41. <li class="pop-title" pop-title="hi,我是shadow">4</li>
  42. <li class="pop-title" pop-title="钉钉">5</li>
  43. <li class="pop-title" pop-title="dicy">6</li>
  44. <li class="pop-title" pop-title="我是拉拉，波~">7</li>
  45. </ul>
  46. <div id="titleTips"></div>
  47. <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
  48. <script type="text/javascript">
  49. $(".pop-title").on("mouseover",function(){
  50. //获取选中元素的私有属性值
  51. var popValue = $(this).attr("pop-title");
  52. //获取元素左边距到窗口左边缘的距离
  53. var xAxis = $(this).offset().left;
  54. //获取元素上边距到窗口顶端的距离（这里减去了滚动条滚动的距离）
  55. var yAxis = $(this).offset().top-$(document).scrollTop();
  56. //获取当前元素的宽度与高度
  57. var domWidth = $(this).width();
  58. var domHeight = $(this).height();
  59. //计算要显示字符的字母个数（显示的框框要根据字符数自动设置宽度）
  60. var fontNumber = popValue.length;
  61. //设置每个字符所占据的像素长度
  62. var widthForSingleAlpha = 20;
  63. //鼠标移入的时候显示提示框。
  64. $("#titleTips").show();
  65. //设置文本框的样式以及坐标
  66. $("#titleTips").css({"position":"absolute",
  67. "width":fontNumber*widthForSingleAlpha+"px",/*自适应设置弹框宽度*/
  68. "height":"30px",
  69. "border":"1px solid grey",
  70. "background":"#FBEADC",
  71. "line-height":"30px",
  72. "text-align":"center",
  73. "border-radius":"5px",
  74. "font-family":"microsoft yahei",
  75. "font-size":"15px",
  76. "font-weight":"normal",
  77. "z-index":"100",
  78. "color":"black"
  79. });
  80. //set dom position
  81. $("#titleTips").css("top",(yAxis+domHeight+4)+"px");/*设置到顶端的距离*/
  82. var smallTipsWidth = $("#titleTips").width();/*获取弹框的宽度*/
  83. $("#titleTips").css("left",xAxis+domWidth/2-smallTipsWidth/2);/*根据弹框的宽度设置其到左端的距离*/
  84. $("#titleTips").text(popValue);/*设置显示的文字内容*/
  85. })
  86. $(".pop-title").on("mouseout",function(){
  87. $("#titleTips").hide();
  88. })
  89. </script>
  90. </body>
  91. </html>

JS自定义Title文字提示相关推荐

  1. js 自定义title提示框(附加文本框内容验证) (II)

    在上一篇的基础上添加了一个小功能,验证文本框是否为空和数字 效果图 页面代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...

  2. jQuery图片提示和文字提示

    图片提示: 效果如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. 使用原生js来替换title属性的悬浮文字提示-可自定义样式和出现时间-190826更新版本2.0源代码

    简介 要让一个DOM元素出现悬浮文字提示,一般情况下,我们都会选择使用H5的title属性.例如: <div title="456">123</div> 这 ...

  4. js实现自定义title提示效果

    html结构 要实现给定义的节点添加提示效果,需要首先需要添加自定义属性data-title,这是data-title是空的,然后通过js把title的值放到里面 <span title=&qu ...

  5. jQuery实现的简单文字提示效果模拟title

    模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <!-- 引用jQuery --><script src="jquery.j ...

  6. HTML中通过js 自定义一个鼠标悬停后立刻显示的Title（附效果图）

    1.通过事件实时获取鼠标当前对于窗体的相对位置,代码如下 <script>document.onmousemove = mouseMove;var posx;var posy;functi ...

  7. elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示

    picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图 效果图 示例 demo 代码 引用 element-u ...

  8. 原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图

    本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...

  9. JS CSS 超出字符省略号，获取字符串实际所占长度，显示文字提示tooltip

    CSS 超出字符省略号 .a{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } JS获取字符串实际所占长度 compute ...

最新文章

  1. Atitit Java OpenCV 捕获视频
  2. iOS开发UI篇—UIButton简介
  3. 原创译文 | 通过设计让学习变轻松
  4. 同一个项目相互调接口_408计算机网络D3-第二章：网络体系结构与参考模型（上）分层结构-协议-接口-服务...
  5. python接口自动化（二）--什么是接口测试、为什么要做接口测试（详解）
  6. SilverLight学习之基本图形
  7. SWFUpload使用指南
  8. PDCA 原则与Smart原则
  9. Shell脚本实现俄罗斯方块小游戏
  10. 中国移动云能力中心IaaS产品部2021年招聘
  11. SaltStack之return与job管理
  12. 首域微交易分析师一对一服务
  13. 衡量计算机的指标（纯小白视角，帮助你理解如何去以较为专业的角度衡量计算机）
  14. 树立品牌价值标杆，维谛技术（Vertiv）荣膺“中国电气工业100强”殊荣
  15. Studio 3T无法连接MongoDB异常错误 解决方法
  16. DDD不够好用，你需要学习如何进行弹性软件系统设计
  17. ContrastMask: Contrastive Learning to Segment Every Thing
  18. java使用Spire.Doc生成的word文件去除水印(头部的警告信息)
  19. 东方财富、同花顺、大智慧、通达信的Level2行情接口哪个好？
  20. 【推荐算法论文阅读】LightGCN: Simplifying and Powering Graph Convolution Network for Recommendation

热门文章

  1. Leetcode2169. 得到 0 的操作数
  2. 纵断面图标注栏数据复制
  3. 许久未曾写过文章了，如今，再度出发：一个一般学校的大三学子，立足过去，展望未来，模糊的规划，坚定的方向，不断前进。
  4. 利用Sympy计算sin1°的最小多项式
  5. 每日一课 | range()函数用法
  6. win10下面搜索框无法搜索应用的解决方案
  7. 迷糊到清楚，清楚又到迷糊
  8. 知乎网页版免登录浏览
  9. 计算机程序设计知识点总结,软考程序员知识点总结（一）
  10. Vue鼠标移入（悬停）显示-移出隐藏