禁用默认工具提示
问题描述:
以下是工具提示脚本http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/。它适用于所有浏览器,但在IE中不禁用默认工具提示。禁用默认工具提示
如何更新以下脚本以禁用默认工具提示?
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip').css({ top: mousey, left: mousex })
});
});
</script>
答
我看不到任何理由将title
属性添加回模糊上的元素。你有它存储在jQuery元数据。我的猜测是这就是为什么IE仍然显示它。删除线
$(this).attr('title', $(this).data('tipText'));
并查看是否修复它。
编辑:那错过了一些要求。这是未经测试,但可能工作:
$(document).ready(function() {
$('.masterTooltip').each(function() {
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
}).hover(function(){
$('<p class="tooltip"></p>')
.text($(this).data('tipText'))
.appendTo('body')
.fadeIn('slow');
}, function() {
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20;
var mousey = e.pageY + 10;
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
注意,这是次优的,因为它在each
块调用$(this)
两次,但应该是很容易解决。
答
我有一个简单的解决方案来禁用IE或其他浏览器的左侧/右侧底部显示的默认工具提示。 [如果您的默认提示是一样的,我提到]
只写一个简单的JavaScript函数
function GoToLink()
{
location.href = "mypage.htm";
}
调用这个函数在标签一样
<a id="204" name="wow" class="SettPage" href="" onclick="GoToLink()">
+0
我想你已经误解了这个问题。如果元素上有标题属性,则不会禁用工具提示。这只会阻止目标网址在状态栏中显示。 – Vincent 2016-08-10 16:49:52
喜斯科特,感谢您的即时答复..我试着做你告诉我的事情......现在发生的事情是,当我第一次鼠标悬停图像时,默认标题和工具提示都出现了。第二次,当我将鼠标悬停在同一图像上时,标题也不显示工具提示。 – varsha 2012-07-10 11:18:30
对不起,林es收集标题,并设置tipText也需要移出.hover分支并进入早期的每个部分。我会更新我的答案。 – 2012-07-10 11:23:38
非常感谢Scott!它正在按照我的要求工作...... – varsha 2012-07-10 12:10:29