[英]How to disable tooltip in the browser with jQuery?
当将鼠标悬停在已填充属性“title”的元素上时,有没有办法禁用浏览器工具提示? 请注意,我不想删除标题内容。 这是代码请求:
$(document).ready(function() {
$('a.clickableSticky').cluetip({
splitTitle: '|',
showTitle: false,
titleAttribute: 'description',
activation: 'click',
sticky: true,
arrows: true,
closePosition: 'title'
});
});
并在asp.net
<ItemTemplate>
<a class="clickableSticky" href="#"
title=' <%#((Limit)Container.DataItem).Tip %>'>
<img src="..\App_Themes\default\images\icons\information.png"/>
</a>
</ItemTemplate>
您可以在页面加载时删除title
属性。
$(document).ready(function() {
$('[title]').removeAttr('title');
});
如果以后需要使用标题,可以将其存储在元素的jQuery data()
。
$(document).ready(function() {
$('[title]').each(function() {
$this = $(this);
$.data(this, 'title', $this.attr('title'));
$this.removeAttr('title');
});
});
另一个选项是将title
属性的名称更改为aTitle
,或浏览器将忽略的其他内容,然后更新任何JavaScript以读取新属性名称而不是title
。
更新:
您可以使用的一个有趣的想法是“悬停”在悬停在元素上时删除标题。 当用户将元素悬停时,您可以返回标题值。
这并不像应该的那样简单,因为如果将title属性设置为null
或删除title属性,IE不会正确删除悬停事件上的工具提示。 但是,如果在悬停时将工具提示设置为空字符串( ""
),它将从包括Internet Explorer在内的所有浏览器中删除工具提示。
您可以使用我上面提到的方法将title属性存储在jQuery的data(...)
方法中,然后将其放回mouseout
。
$(document).ready(function() {
$('[title]').mouseover(function () {
$this = $(this);
$this.data('title', $this.attr('title'));
// Using null here wouldn't work in IE, but empty string will work just fine.
$this.attr('title', '');
}).mouseout(function () {
$this = $(this);
$this.attr('title', $this.data('title'));
});
});
这是现代 jQuery方法(IMO)......
$('[title]').attr('title', function(i, title) {
$(this).data('title', title).removeAttr('title');
});
...当然,阅读title
属性是用...完成的
$('#whatever').data('title');
遵循Dan Herbert的上述建议,以下是代码:
$(element).hover(
function () {
$(this).data('title', $(this).attr('title'));
$(this).removeAttr('title');
},
function () {
$(this).attr('title', $(this).data('title'));
});
您可以使用jQuery删除标题attribte的内容,或将其移动到其他参数中供以后使用。
这确实意味着你失去了一些可访问性。
RE:ClueTip Google的搜索似乎表明这是一个常见问题 - 这只发生在IE中吗? ClueTip似乎在FireFox中按预期工作。
function hideTips(event) {
var saveAlt = $(this).attr('alt');
var saveTitle = $(this).attr('title');
if (event.type == 'mouseenter') {
$(this).attr('title','');
$(this).attr('alt','');
} else {
if (event.type == 'mouseleave'){
$(this).attr('alt',saveAlt);
$(this).attr('title',saveTitle);
}
}
}
$(document).ready(function(){
$("a").live("hover", hideTips);
});
大家好。 我正在使用此解决方案,它适用于所有浏览器。
破解ClueTip
以使用重命名的title属性。
由于我需要在另一个操作(如复制屏幕或选择颜色)中使用此功能,因此我的解决方案包含两个在该操作开始时和结束时调用的函数:
$.removeTitles = function() {
$('[title]').bind('mousemove.hideTooltips', function () {
$this = $(this);
if($this.attr('title') && $this.attr('title') != '') {
$this.data('title', $this.attr('title')).attr('title', '');
}
}).bind('mouseout.hideTooltips', function () {
$this = $(this);
$this.attr('title', $this.data('title'));
});
}
$.restoreTitles = function() {
$('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips');
$('*[data-title!=undefined]').attr('title', $this.data('title'));
}
无法使用MouseEnter,因为其他元素可以覆盖标题元素(作为标题div中的图像),并且只要将鼠标悬停在内部元素(图像!)上就会出现mouseOut
但是,当使用mouseMove时,您应该注意,因为事件会多次触发。 为避免擦除保存的数据,请先检查标题是否为空!
RemoveTitles中的最后一行,尝试从鼠标单击或快捷键上调用结束时鼠标未退出的元素恢复标题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.