是否有可能在鼠标悬停时立即显示锚标记的标题属性,而不仅仅是在秒之后。 JavaScript / jQuery和CSS中的任何解决方案都很好。
答案 0 :(得分:9)
title
属性的处理取决于浏览器,并且没有定义任何API来控制它,在规范中更少指定。这包括延迟,显示的持续时间,使用的字体,字体大小等。
还可以使用其他技术而不是 title
属性。其他答案中提到了其中一些。请注意,简单的“CSS工具提示”可以简单灵活地在纯CSS中实现。使用这些技术时,要显示的数据通常在title
属性中不,因为它的处理依赖于浏览器,因此存在显示特殊工具提示的风险< em>和浏览器的title
实现。虽然可以防止后者,但是当启用脚本时,使用对任何内容都没有默认效果的属性会更简单,例如data-title=...
或data-tooltip=...
。
答案 1 :(得分:6)
一种方法:
// 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);
&#13;
[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;
}
&#13;
<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" />
&#13;
参考文献:
答案 2 :(得分:3)
您无法使用默认工具提示执行此操作,但您可以将jQuery插件用于工具提示或引导程序。创建它的最佳方法是创建自定义工具提示。
http://tech.pro/tutorial/930/jquery-custom-tooltips
以下是一些可以使用的参考资料
答案 3 :(得分:2)
Bootstraps ToolTip插件做得非常好,响应速度更快/更快。
只需要运行默认的Bootstrap文件。
可以根据您的要求更改CSS。
此处可显示更多信息和示例:
答案 4 :(得分:2)
您可以隐藏mouseover
上的标记并附加一个范围。然后删除范围并在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);
});
检查示例 - http://jsfiddle.net/1z3catx3/1/
注意:您当然需要设置span
答案 5 :(得分:2)
使用box-shadow和border array托盘:
$('a').hover(function(e){
title = $(this).attr('alt');
$(this).append('<span>'+title+'</span>')
},
function(e){
$('span', this).remove();
});