Javascript 使标题属性在悬停时立即出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26259665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make title attribute appear instantly on hover
提问by Genmais
is there a possibility to make a title attribute of an anchor tag appear instantly on mouseover not just after seconds. Any solution in JavaScript/jQuery and CSS is good.
是否有可能使锚标签的标题属性在鼠标悬停时立即出现，而不是在几秒钟后。JavaScript/jQuery 和 CSS 中的任何解决方案都很好。
回答by Jukka K. Korpela
The handling of the titleattribute is browser-dependent, and no APIs have been defined to control it, still less specified in specs. This includes the delay, the duration of the display, the font used, font size, etc.
title属性的处理依赖于浏览器，并且没有定义 API 来控制它，在规范中更不用说。这包括延迟、显示持续时间、使用的字体、字体大小等。
There are other techniques that can be used instead ofthe titleattribute. Some of them have been mentioned in other answers. Note that simple “CSS tooltips” can be implemented in pure CSS rather simply and flexibly. When using these techniques, the data to be shown is usually notin a titleattribute, since its handling is browser-dependent, so there would be a risk of having your special tooltip display anda browser's implementation of title. Though it is possible to prevent the latter, when scripting is enabled, it is simpler to use an attribute that has no default effect on anything, such as data-title=...or data-tooltip=....
有迹象表明，可以使用其他技术替代的title属性。其中一些已在其他答案中提到。请注意，简单的“CSS 工具提示”可以在纯 CSS 中相当简单灵活地实现。当使用这些技术，要显示的数据通常是不会在一个title属性，因为其处理是依赖于浏览器，所以就为您的特殊工具提示显示的风险和浏览器的实现title。虽然可以防止后者，但在启用脚本时，使用对任何事物都没有默认影响的属性更简单，例如data-title=...或data-tooltip=...。
回答by David says reinstate Monica
One approach:
一种方法：
// textFrom : String, the attribute from which the text
// should come,
// delta : String or Number, the distance from the cursor at
// which the tooltip should appear
function instantTooltips(textFrom, delta) {
// if delta exists, and can be parsed to a number, we use it,
// otherwise we use the default of 5:
delta = parseFloat(delta) ? parseFloat(delta) : 5;
// function to handle repositioning of the created tooltip:
function reposition(e) {
// get the tooltip element:
var tooltip = this.nextSibling;
// setting the position according to the position of the
// pointer:
tooltip.style.top = (e.pageY + delta) + 'px';
tooltip.style.left = (e.pageX + delta) + 'px';
}
// get all elements that have an attribute from which we
// want to get the tooltip text from:
var toTitle = document.querySelectorAll('[' + textFrom + ']'),
//create a span element:
span = document.createElement('span'),
// find if we should use textContent or innerText (IE):
textProp = 'textContent' in document ? 'textContent' : 'innerText',
// caching variables for use in the upcoming forEach:
parent, spanClone;
// adding a class-name (for CSS styling):
span.classList.add('createdTooltip');
// iterating over each of the elements with a title attribute:
[].forEach.call(toTitle, function(elem) {
// reference to the element's parentNode:
parent = elem.parentNode;
// cloning the span, to avoid creating multiple elements:
spanClone = span.cloneNode();
// setting the text of the cloned span to the text
// of the attribute from which the text should be taken:
spanClone[textProp] = elem.getAttribute(textFrom);
// inserting the created/cloned span into the
// document, after the element:
parent.insertBefore(spanClone, elem.nextSibling);
// binding the reposition function to the mousemove
// event:
elem.addEventListener('mousemove', reposition);
// we're setting textFrom attribute to an empty string
// so that the CSS will still apply, but which
// shouldl still not be shown by the browser:
elem.setAttribute(textFrom, '');
});
}
// calling the function:
instantTooltips('title', 15);[title] {
display: block;
margin: 0 0 1em 0;
}
/*
hiding, and styling, the elements we'll be creating
*/
[title] + span.createdTooltip {
display: none;
border: 2px solid #f90;
background-color: rgba(255, 255, 255, 0.8);
padding: 0.2em 0.5em;
border-radius: 0.75em;
}
/*
showing the created elements on hovering the element we want to
show tooltips for
*/
[title]:hover + span.createdTooltip {
display: block;
position: absolute;
}<span title="This is the span's title">A span element</span>
<img src="http://placekitten.com/g/250/250" title="A kitten." />
<input title="This is an input element's title." value="This input has a title" />References:
参考：
回答by Laxmikant Dange
You can not do it with default tooltips but you can use jQuery plugins for tooltip or bootstrap. and the best way to create this is create custom tooltip.
您无法使用默认工具提示来完成此操作，但您可以使用 jQuery 插件作为工具提示或引导程序。创建它的最佳方法是创建自定义工具提示。
http://tech.pro/tutorial/930/jquery-custom-tooltips
http://tech.pro/tutorial/930/jquery-custom-tooltips
Here are some references which you can use
以下是一些您可以使用的参考资料
Simpletip: http://craigsworks.com/projects/simpletip/
简单提示：http: //craigsworks.com/projects/simpletip/
Bootstrap: http://getbootstrap.com/javascript/#tooltips
回答by Alex
You could hide the tite on mouseoverand append a span. then remove the span and reinstate the title on mouseout
您可以隐藏 titemouseover并附加一个跨度。然后删除跨度并恢复标题mouseout
$('a').hover(function(e){
title = $(this).attr('title');
$(this).append('<span>Im Super Fast!!!</span>')
$(this).removeAttr('title');
},
function(e){
$('span', this).remove();
$(this).attr('title',title);
});
Check the example - http://jsfiddle.net/1z3catx3/1/
检查示例 - http://jsfiddle.net/1z3catx3/1/
note: You would of course need to style the span
注意：您当然需要设置样式 span
回答by haxtbh
Bootstraps ToolTip plugin does a pretty good job of this and is a lot more responsive / quicker.
Bootstraps ToolTip 插件在这方面做得很好，并且响应速度更快/更快。
Just requires the default Bootstrap files to run.
只需要运行默认的 Bootstrap 文件。
CSS can be changed to suit your requirements.
可以更改 CSS 以满足您的要求。
More information and examples can be shown here:
可以在此处显示更多信息和示例：
回答by hhh
tray this with box-shadow and border array:
用 box-shadow 和 border 数组托盘：
$('a').hover(function(e){
title = $(this).attr('alt');
$(this).append('<span>'+title+'</span>')
},
function(e){
$('span', this).remove();
});
