简单的工具提示 - 标题属性? [英] Simple tooltip - Title Attribute?

查看:94
本文介绍了简单的工具提示 - 标题属性?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我想要显示一个消息时,用户鼠标悬停在一个对象上,最近我只是在我的html标签上使用 title 属性,因为它很简单,并且不会自动关闭。



问题:使用 title 属性是依赖于工具提示的一件坏事吗?



忽略无法自定义的事实,我对使用定制工具提示的功能感到好奇(例如标准用户如何与它交互)。例如,我阅读的特定的网络漫画使用 title 属性添加一个机智当你悬停在它上面的评论/ factoid。然而,并不是很多人似乎知道它。



因此,标题似乎可能对评论有好处,甚至可能会说一个图片,但它是一个真正的简单的工具提示?



考虑到一个'真正'的工具提示,你通常需要1-2个额外的元素,CSS(并且取决于你如何设置它,可能是一些内联样式来放置),甚至可能是java-script, title 属性是不好用的,因为(再次)它不能被定制,通常是很小的注意:如果它有帮助(思考的食物),那么它可能会在一段时间后出现。

,我目前的情况引发了这个问题,我喜欢当一个网站有类似于 [?] 的东西时,您可以将鼠标悬停在上面以查找更多详细信息,而不用将它们放入页面,因此保持简单。
另外,我从w3schools学到了html,他们从未提及过属性,所以不太确定它们的用途/用途。 (是的,提到w3schools的一部分是一个(坏)尝试获得同情)<br/> <br/> <p>我发现这个问题有点奇怪,要求考虑SO使用它们很多,但随时可以假设我对此一无所知......好吧......我真的没有这样做)</p> <b> <b> <b> </div><p> </b> title属性(@title)不应该被使用。 </b> <br/> <br/> </p><ol> <br/> <li> <br/> <li>每个浏览器都使用@title自己做,即使看起来相同。 >对于只使用键盘的人,他们无法获取@title中的信息。 </li> <br/> <li>从移动设备访问网站的用户无法获取信息。 </li> <br/> <li>有些但不是所有的辅助技术都可以获得@title <br/> </p><ol> <br/> <li>中的信息,允许在启用后读取它。哪些人(用户)知道的不多。 </li> <br/> </li> <br/> </li> <br/> </li> $其他技术仅会忽略链接文本并仅读取@title。 b <br/> $ b <ex> 4.2:<b> <br/> <br/> </p><pre> <code>< a href =#title =Are你确定?>删除你的帐户< / a> <br/> </code> </pre><p>这会显示为:<b> <br/> <br/> </p><blockquote> <br/> <p>你确定吗? Link </b> <br/> </blockquote><p>进一步阅读:<a href =http://www.paciellogroup.com/blog/2012/01/html5-无障碍-chops-title-attribute-use-and-abuse /> PG:Title属性</a> </p> <br/><p>When I want to have a message show when a user mouse overs an object, and lately I just use the <em>title</em> attribute on my html tags since it's simple and automatically doesn't go off screen.</p> <p><strong>Question:</strong> Is using the <em>title</em> attribute is a bad thing to rely on for a tool-tip?</p> <p>Ignoring the fact you can't customize it, I'm curious about functionality over using a custom made tool-tip (such as how the standard user interacts with it). A <a href="https://stackoverflow.com/a/84589/1411473">specific web-comic</a> I read, for example, uses the <em>title</em> attribute to add a witty comment / factoid when you hover over it. Yet not many people seem to know about it.</p> <p>As such it seems a <em>title</em> might be good for a comment, or even saying author of a picture, but is it good for a true simply tool-tip?</p> <p>Considering for a 'real' tool-tip you need usually 1-2 extra elements, css (and depending how you set it up, possibly some inline style for placement), and possibly even java-script, is the <em>title</em> attribute bad to use since (again) it cannot be customized, is often a small off-topic detail about the element, and only appears after a set amount of time.</p> <p><strong>Note:</strong> If it helps (food for thought), my current situation that brought this question on, is I like when a site has something like <code>[?]</code> for you to hover over to find more details without shoving them into the page, thus keeping it simple. Also, I learned html from w3schools, and they never mention the <em>title</em> attribute, so not really sure what they are intended / should be used for. (and yes, mentioning w3schools part was a (bad) attempt at getting sympathy)</p> <p>And I find this question kind of weird to ask considering SO uses them quite a bit, but feel free to assume I know nothing about it as... well... I really don't)</p><div class="h2_lin"> 解决方案 </div><p>The title attribute (@title), should not be used. </p><ol> <li>Every browser does their own thing with the @title, even though it looks the same.</li> <li>For people who just use the keyboard, they cannot get the information in @title. </li> <li>People accessing the site from a mobile device, cannot get the information. </li> <li>Some, but not all assistive technology can get the information in the @title </p><ol> <li>some allows it to be read after enabling it. Which not many people (users) know about. </li> <li>other technology simply ignores the link text and reads the @title only.</li> </ol><p></li> </ol><p>Ex of 4.2:</p><pre><code><a href="#" title="Are you sure?">Delete your account</a> </code></pre><p>This will read: </p><blockquote> <p>Are you sure? Link</p> </blockquote><p>Further Reading: <a href="http://www.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title-attribute-use-and-abuse/">PG: Title attribute</a></p> <p>这篇关于简单的工具提示 - 标题属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('865866');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="工具提示(标题属性)正在被截断" href="/579179.html"> 工具提示(标题属性)正在被截断; </a> </li> <li> <a target="_blank" title="如何暂停显示工具提示的标题属性?" href="/870637.html"> 如何暂停显示工具提示的标题属性?; </a> </li> <li> <a target="_blank" title="我需要HTML的EN code标题属性(工具提示)?" href="/258712.html"> 我需要HTML的EN code标题属性(工具提示)?; </a> </li> <li> <a target="_blank" title="简单的Javascript工具提示" href="/1011405.html"> 简单的Javascript工具提示; </a> </li> <li> <a target="_blank" title="改变“标题”的速度有多快属性的工具提示出现" href="/862047.html"> 改变“标题”的速度有多快属性的工具提示出现; </a> </li> <li> <a target="_blank" title="删除标题标签工具提示" href="/865930.html"> 删除标题标签工具提示; </a> </li> <li> <a target="_blank" title="如何设置工具提示标题" href="/1460856.html"> 如何设置工具提示标题; </a> </li> <li> <a target="_blank" title="在IE 11中使用标题属性的工具提示" href="/879310.html"> 在IE 11中使用标题属性的工具提示; </a> </li> <li> <a target="_blank" title="是否可以格式化HTML工具提示(标题属性)?" href="/860672.html"> 是否可以格式化HTML工具提示(标题属性)?; </a> </li> <li> <a target="_blank" title="我可以依赖标题属性显示为工具提示吗?" href="/557643.html"> 我可以依赖标题属性显示为工具提示吗?; </a> </li> <li> <a target="_blank" title="Fancybox2 - 来自标题属性的工具提示和图像标题的不同内容?" href="/2623069.html"> Fancybox2 - 来自标题属性的工具提示和图像标题的不同内容?; </a> </li> <li> <a target="_blank" title="Fancybox2 - 工具提示和图像标题的不同内容,都来自标题属性?" href="/2812336.html"> Fancybox2 - 工具提示和图像标题的不同内容,都来自标题属性?; </a> </li> <li> <a target="_blank" title="HTML标题属性在Chrome中未显示为工具提示" href="/819509.html"> HTML标题属性在Chrome中未显示为工具提示; </a> </li> <li> <a target="_blank" title="列标题的Handsontable + Bootstrap工具提示" href="/2116532.html"> 列标题的Handsontable + Bootstrap工具提示; </a> </li> <li> <a target="_blank" title="无法更改引导工具提示标题" href="/1484323.html"> 无法更改引导工具提示标题; </a> </li> <li> <a target="_blank" title="从工具提示中隐藏标题" href="/562580.html"> 从工具提示中隐藏标题; </a> </li> <li> <a target="_blank" title="如何创建简单的工具提示文本" href="/1189042.html"> 如何创建简单的工具提示文本; </a> </li> <li> <a target="_blank" title="LinkBut​​ton的工具提示属性" href="/1416661.html"> LinkBut​​ton的工具提示属性; </a> </li> <li> <a target="_blank" title="如何隐藏图表工具提示的标题?" href="/1811959.html"> 如何隐藏图表工具提示的标题?; </a> </li> <li> <a target="_blank" title="使用jquery 1.3.2创建的简单工具提示" href="/1869034.html"> 使用jquery 1.3.2创建的简单工具提示; </a> </li> <li> <a target="_blank" title="jQuery工具:工具提示,jQuery对"this"的引用属性" href="/1815159.html"> jQuery工具:工具提示,jQuery对"this"的引用属性; </a> </li> <li> <a target="_blank" title="如何获取文本框的标题/工具提示..." href="/1309141.html"> 如何获取文本框的标题/工具提示...; </a> </li> <li> <a target="_blank" title="如何使用RSpec测试输入标题/工具提示" href="/1990846.html"> 如何使用RSpec测试输入标题/工具提示; </a> </li> <li> <a target="_blank" title="工具提示(标题=“...”)不会显示在Firefox中" href="/557612.html"> 工具提示(标题=“...”)不会显示在Firefox中; </a> </li> <li> <a target="_blank" title="可以向表单标题添加工具提示" href="/2444487.html"> 可以向表单标题添加工具提示; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome(在Electron内部)突然重定向到chrome-error:// chromewebdata?" href="/1996151.html"> 为什么Chrome(在Electron内部)突然重定向到chrome-error:// chromewebdata?; </a> </li> <li> <a target="_blank" title="错误102(net :: ERR_CONNECTION_REFUSED):服务器拒绝连接" href="/749568.html"> 错误102(net :: ERR_CONNECTION_REFUSED):服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'?" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止:没有'Access-Control-Allow-Origin'标题'?; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught(in promise)DOMException:play()失败,因为用户没有首先与文档交互。”在桌面上使用Chrome 66?" href="/884909.html"> 如何处理“Uncaught(in promise)DOMException:play()失败,因为用户没有首先与文档交互。”在桌面上使用Chrome 66?; </a> </li> <li> <a target="_blank" title="警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告:添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件(视频/ MP2T媒体类型)?" href="/343346.html"> 如何在浏览器中播放.TS文件(视频/ MP2T媒体类型)?; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表,但转换为MIME类型text / html(似乎与web服务器无关)" href="/562873.html"> 资源解释为样式表,但转换为MIME类型text / html(似乎与web服务器无关); </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*',因为它的MIME类型(“应用/ JSON')不是可执行文件,并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*',因为它的MIME类型(“应用/ JSON')不是可执行文件,并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '简单,的,工具,提示,标题,属性'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接: <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>