JS自定义Title文字提示

最新推荐文章于 2024-08-19 11:06:31 发布
最新推荐文章于 2024-08-19 11:06:31 发布
阅读量7.6k 收藏 4
点赞数 1
文章标签： js提示层 链接提示 title提示


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

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

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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  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 plain  copy
  在CODE上查看代码片 派生到我的代码片
  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>  


cc蒲公英
关注
JQuery写的title提示的美化效果
ly272864318的专栏
03-20 1971
最近项目需求要做一个文字的提示效果，因为原生的title提示样式太丑，所以本人因此用Jquery写了一个简单的title美化效果 闲话少数，直接上代码 title提示效果美化 $(function(){ $(".box li a").bind({ //鼠标移动到文字上; mouseover: function () { var tooltip = ""
通过JS修改标签title属性设置鼠标悬浮提示字段效果，火狐，IE8，IE9，360那什么内核 完美兼容。...
weixin_30877493的博客
03-23 426
var qTipTag = "*"; //所要改变的标签（需小写）!// var qTipX = 10; //弹出窗口位于鼠标左侧的距离。// var qTipY = 15; //弹出窗口位于鼠标下方的距离。// tooltip = { name: "qTip", offsetX: qTipX, offsetY: qTipY, ...
替换标准的 title alt 使其可以使用HTML
nbgzc的专栏
07-27 799
//***********默认设置定义.*********************var tPopWait=50;  //停留tWait豪秒后显示提示。var tPopShow=6000;  //显示tShow豪秒后关闭提示var showPopStep=20;var popOpacity=95;var tfontcolor="#000000";var tbgcolor="#ffffe1";var
实现自定义窗口title
nnyangmei的专栏
08-16 808
第一步，实现自定义标题栏，需要在onCreate方法里这样写 requestWindowFeature(Window.FEATURE_CUSTOM_TITLE); setContentView(R.layout.main); getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.titlebar); 注意：reque
Div形式的title显示JS代码
TomHu的专栏
12-24 1215
这个其实并不是原创，是从别人网站上扒下来的哈·····感觉很漂亮，所以就·····呵 ····把这个JS加到你的项目中·····var pltsPop=null;var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适 var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适 var
标签中的title属性可以让鼠标有个小悬浮框做提示
bingguang1993的博客
09-25 2387
标签中的title属性可以让鼠标有个小悬浮框做提示
用简单的jquery+CSS创建自定义的a标签title提示tooltip
12-14
用简单的jquery+CSS创建自定义的a标签title提示，用来代替浏览器默认行为。如图：   Javascript代码 复制代码代码如下: </pre><pre name=”code” class=”javascript”>$(function() { $(“a[title]”).each...
Vue 自定义文字提示框
最新发布
qq_54855933的博客
08-19 760
本文主要展示一个自定义文字提示框的具体代码，以及对应效果展示
使用原生js来替换title属性的悬浮文字提示-可自定义样式和出现时间-190826更新版本2.0源代码
郑伟斌的博客
04-26 2867
简介 要让一个DOM元素出现悬浮文字提示，一般情况下，我们都会选择使用H5的title属性。例如: <div title="456">123</div> 这样设置之后，当鼠标在div上悬浮过了一段时间之后，网页上鼠标位置附近就会出现悬浮文字提示，例如这样： 但是，不同的浏览器，悬浮等待的时间和悬浮文字的样式都可能会不一样，例如chrome上显示是白底灰字，firefox上...
JavaScript Title、alt提示（Tips）实现源码解读
10-28
我们知道给某些HTML标签加上title属性后，这个标签对象在浏览的时候，鼠标移上去就会有一个小提示框出来，并显示title定义的内容。
JS 原生实现title （自定义样式，延迟显示）
weixin_55042716的博客
08-31 1937
自定义添加DOM节点，当做title，通过控制鼠标事件，控制自定义title是否显示。以及延迟1.5S后显示。（原生提供的title ，不提供延迟显示）
html 悬停显示标题,JS实现TITLE悬停长久显示效果完整示例
weixin_39628256的博客
06-03 643
本文实例讲述了JS实现TITLE悬停长久显示效果。分享给大家供大家参考，具体如下：JS控制TITLE悬停效果/*** className 类名* tagname HTML标签名，如div,td,ul等* @return Array 所有class对应标签对象组成的数组* @exampleabcvar abc = getClass('abc');for(i=0;iabc[i].style.backg...
HTML中通过js 自定义一个鼠标悬停后立刻显示的Title（附效果图）
NanChen的博客
08-24 3429
HTML中通过js 自定义一个鼠标悬停后立刻显示的Title，实测可用
html 中增加title属性
业精于勤荒于嬉;行成于思，毁于随。
08-24 4063
有的时候我们需要在`1234567 某个标签中增加tip显示，以解决宽度不够，内容较长的问题。 但是有的时候会出现只显示部分的情况，这时候我们需要看下是不是因为有一些特殊符号导致的。 比如空格或者双引号 。如果有把空格去掉，双引号改成单引号即可。
js操作div仿title提示信息效果,增强型title信息提示
lilt085163的专栏
09-19 687
<br /><html> <head> <mce:style type="text/css"><!-- .xstooltip { visibility: hidden; position: absolute; top: 0; left: 0; z-index: 2; font: normal 8pt sans-serif; padding: 3px; border: solid 1px; }
html警告框标题怎么改,JS和jQuery实现个性化标题title属性中漂亮的tooltip气泡提示美化框...
weixin_30800615的博客
06-16 867
话不多说，直接放代码JS代码方式控制//tooltiptooltip();functiontooltip(){$("a,div,li,h3,h4,img,i").each(function(){$("#tooltip").remove();if(this.title){vara=this.title;$(this).mouseover(function(b){this.title...
网站 tooltip和title提示美化教程
不定时分享最优质的网络技术与教程，满满的干货。
12-02 463
浏览器自带的alt和title提示太丑了，所以我们需要美化一下，百度有许多，不过对我们这些小白来说很难。放以下js到公用js里面。
浮动提示title更改字体大小
syx_cainiao的博客
04-23 3221
项目前提：已修改了title的默认样式，主要js代码 function showTitle(el, title) { const popover = getPopover(); const popoverStyle = popover.style; if (title === undefined || title==='') { popoverStyle.display = 'none'; } else { const elRect = el.getBoundingClie
showModal自定义按钮文字
09-22
showModal函数可以通过设置confirmText和cancelText两个参数来自定义按钮的文字。confirmText用于设置确定按钮的文字，默认是"确定"；cancelText用于设置取消按钮的文字，默认是"取消"。例如，如果想要将确定按钮的文字改为"是的"，取消按钮的文字改为"不了"，可以将confirmText设置为"是的"，cancelText设置为"不了"。以下是修改后的代码示例： ```javascript wx.showModal({ title: '提示', content: '您确定要删除该文件吗？', confirmText: '是的', cancelText: '不了', success: function(res) { if (res.cancel) { // 点击取消 console.log('您点击了取消'); } else if (res.confirm) { // 点击确定 console.log('您点击了确定'); } } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值