删除工具提示 [英] removing tooltip

问题描述

有没有办法禁用鼠标悬停在图像上时显示在浏览器中的默认工具提示?这是没有删除标题或 alt 标签.另一个选项，是否可以使工具提示为某些图像类型(例如 JPG)显示特定文本，并为不同的图像类型(例如 PNG)显示另一个文本?

Is there a way to disable the default tooltip that shows up in a browser when hovering over an image? This is without removing the title or alt tags. Another option, can the tooltip be made to show a specific text for certain image types (such as JPG) and another text for a different image type (such as PNG)?

推荐答案

title 属性在大多数浏览器中默认用作悬停文本.我能看到删除它们的唯一方法是删除 title 属性.JavaScript 将能够做到这一点.我确定有一种纯粹的 DOM 方式可以做到这一点，但我使用了一点 jQuery:

The title attribute is used as hover text in most browsers by default. The only way I could see removing them is to remove the title attribute. JavaScript would be capable of doing this. I'm sure there is a pure DOM way to do this, but I'm using a little jQuery:

$(function() { // when the document becomes ready for manipulation
  $("[title]").removeAttr('title'); // removes title from all things that have title
  // your other options:
  // all images who's src ends in .jpg       
  $("img[src$=.jpg]").attr('title','JPG Image'); 
  // all images who's src ends in .png 
  $("img[src$=.png]").attr('title','PNG Image'); 
}

如果您需要将其粘贴在您的页面上，我建议制作一个包含此代码的 site.js 文件.然后你需要告诉你的 HTML 页面加载它.你应该有一些主站点模板文件(它可能已经有 jQuery - 如果是这样，请跳过 jQuery 的包含:

If you need to stick this on your pages, I suggest making a site.js file that has this code in it. Then you need to tell your HTML pages to load it. You should have some main site template file (and it may already have jQuery - if so skip the include for jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript" src="/js/site.js"> </script>

对评论的回复:如何将工具提示中可以出现的字符限制为 0 或最多 10 个?

Response to comment: how about restricting the characters that can appear in the tooltip to zero or up to let's say 10?

这个问题变得稍微复杂一点，为此让我们把.each() 在带有标题的元素上:

This problem gets slightly more complicated, for this one lets pull out .each() on elements with titles:

 $("[title]").each(function() {
    var $this = $(this); // shortcut for later
    var title = $this.attr('title'); // get the title attribute
    // if the length of our title was 10 characters or more, shorten it and set:
    if (title.length>10) {
      $this.attr('title', title.substring(0,10));
    }
 });

这篇关于删除工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！