Is there a way to hide the native tooltip action when a user hovers over a anchor tag with a title attribute? I don't want to remove it just don't display the nasty yellow box that is the default tooltip action.
UPDATE:
After reading a couple of other posts I don't think I can hide the title attribute for the native tooltip action, but I'm trying to think outside of the box here. Could I use another attribute instead of the title attribute inside the anchor tag and still keep a valid page???
Removing the title attribute value is not an option unless someone can figure out how to add it back for a onclick event?
WORKING CODE BELOW
$('[title]').each( function() {
var $this = $(this);
$this.data('title',$this.attr('title'));
$this.removeAttr('title');
});
$('a').click( function() {
var $this = $(this);
var title = $this.data('title');
... do your other stuff...
});
显然，标题属性不属于正常的事件处理程序下。 不管怎么说，我原来的答复没有工作，但我会继续玩它，看看我是否能得到它的工作。 如果您需要保留title属性，但不希望在弹出的效果，比如在你的评论所指出的，然后存储在该元素的数据的标题属性，并从那里使用它。
$('[title]').each( function() {
var $this = $(this);
$this.data('title',$this.attr('title'));
$this.removeAttr('title');
});
$('a').click( function() {
var $this = $(this);
var title = $this.data('title');
... do your other stuff...
});
原来的答案 ：
给每个具有所有权在处理特定的悬停防止默认动作元素。
$('[title]').hover(
function(e) {
e.preventDefault();
},
function() { }
);
除了测试后似乎并没有工作。
你可以将其删除：
$("a").removeAttr("title");
这将删除它只是JS-用户，所以它仍然accessable和容易找到的搜索引擎。
我用BEJ NI C BEJ代码的变化，因为我需要保持悬停标题的内容，但仍需要抑制默认行为。
// Suppress default tooltip behavior on hover
var tempTitle = "";
$('abbr[title],dfn[title],span.info-tip[title],').hover(
function(e){
e.preventDefault();
tempTitle = $(this).attr('title');
$(this).attr('title', '');
// add attribute 'tipTitle' & populate on hover
$(this).hover(
function(){
$(this).attr('tipTitle', tempTitle);
}
);
},
// restore title on mouseout
function() {
$(this).attr('title', tempTitle);
}
);
这让我做这件事在我的样式表： /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */ /* abbr & tooltip styles: first, the immediate descendants of the content area are set to highlight abbreviations on hover, but avoiding lists; as we don't want *all* abbreviations highlighted when you hover on a root list */
abbr,
abbr[tipTitle],
dfn,
dfn[tipTitle],
span.info-tip,
span.info-tip[tipTitle] {
border-bottom:none; /*remove border 1st, then let following rules add it back in*/
}
p:hover abbr[tipTitle],
li:hover abbr[tipTitle],
dl>*:hover abbr[tipTitle],
label:hover abbr[tipTitle],
p:hover dfn[tipTitle],
li:hover dfn[tipTitle],
dl>*:hover dfn[tipTitle],
label:hover dfn[tipTitle],
p:hover span.info-tip[tipTitle],
li:hover span.info-tip[tipTitle],
dl>*:hover span.info-tip[tipTitle],
label:hover span.info-tip[tipTitle]
{
position: relative;
text-decoration: none;
border-bottom: 1px dotted #333;
cursor: help;
}
p:hover abbr[tipTitle]:before,
li:hover abbr[tipTitle]:before,
dl>*:hover abbr[tipTitle]:before,
label:hover abbr[tipTitle]:before,
p:hover dfn[tipTitle]:before,
li:hover dfn[tipTitle]:before,
dl>*:hover dfn[tipTitle]:before,
label:hover dfn[tipTitle]:before,
p:hover span.info-tip[tipTitle]:before,
li:hover span.info-tip[tipTitle]:before,
dl>*:hover span.info-tip[tipTitle]:before,
label:hover span.info-tip[tipTitle]:before {
content: "";
position: absolute;
border-top: 20px solid #803808;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
visibility: hidden;
top: -18px;
left: -26px;
}
p:hover abbr[tipTitle]:after,
li:hover abbr[tipTitle]:after,
dl>*:hover abbr[tipTitle]:after,
label:hover abbr[tipTitle]:after,
p:hover dfn[tipTitle]:after,
li:hover dfn[tipTitle]:after,
dl>*:hover dfn[tipTitle]:after,
label:hover dfn[tipTitle]:after,
p:hover span.info-tip[tipTitle]:after,
li:hover span.info-tip[tipTitle]:after,
dl>*:hover span.info-tip[tipTitle]:after,
label:hover span.info-tip[tipTitle]:after {
content: attr(tipTitle);
position: absolute;
color: white;
top: -35px;
left: -26px;
background: #803808;
padding: 5px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
white-space: nowrap;
visibility: hidden;
}
p:hover abbr[tipTitle]:hover:before,
li:hover abbr[tipTitle]:hover:before,
dl>*:hover abbr[tipTitle]:hover:before,
label:hover abbr[tipTitle]:hover:before,
p:hover dfn[tipTitle]:hover:before,
li:hover dfn[tipTitle]:hover:before,
dl>*:hover dfn[tipTitle]:hover:before,
label:hover dfn[tipTitle]:hover:before,
p:hover span.info-tip[tipTitle]:hover:before,
li:hover span.info-tip[tipTitle]:hover:before,
dl>*:hover span.info-tip[tipTitle]:hover:before,
label:hover span.info-tip[tipTitle]:hover:before,
p:hover abbr[tipTitle]:hover:after,
li:hover abbr[tipTitle]:hover:after,
dl>*:hover abbr[tipTitle]:hover:after,
label:hover abbr[tipTitle]:hover:after,
p:hover dfn[tipTitle]:hover:after,
li:hover dfn[tipTitle]:hover:after,
dl>*:hover dfn[tipTitle]:hover:after,
label:hover dfn[tipTitle]:hover:after,
p:hover span.info-tip[tipTitle]:hover:after,
li:hover span.info-tip[tipTitle]:hover:after,
dl>*:hover span.info-tip[tipTitle]:hover:after,
label:hover span.info-tip[tipTitle]:hover:after {
visibility: visible;
transition: visibility 0s linear .3s;
-moz-transition: visibility 0s linear .3s;
}
给我相当提示，我需要他们，而不会同时出现的默认提示。
把它弄出来的称号，我会使用数据（）方法：
$(document).ready( function () {
$('.items_with_title').each( function () {
$(this).data('title', $(this).attr('title') );
$(this).removeAttr('title');
});
});
// to access it
$(document).ready( function () {
$('A').click( function () {
alert($(this).data('title'));
});
});
你也可以做出具有title属性的项目选择：
$('*[title]').each(...
楼主只是想禁用.tooltip的本土行动（）。 如果是这样的话，请使用以下简单的解决方案：
$(function() {
$( document ).tooltip({
items: "[data-tooltip]",
content: function() {
var element = $( this );
if ( element.is( "[data-tooltip]" ) ) {
return element.attr('data-tooltip');
}
}
});
});
现在，[标题]属性被禁用，并且当一个元件有一个[数据提示]属性工具提示只会触发。 通过定义更多的“项目”，你可以创建不同的行为和风格：
$(function() {
$( document ).tooltip({
items: "[data-tooltip],img[alt]",
content: function() {
var element = $( this );
if ( element.is( "[data-tooltip]" ) ) {
return element.attr('data-tooltip');
}
if ( element.is( "[alt]" ) ) {
return element.attr('alt') + something_else;
}
}
});
});
http://jqueryui.com/tooltip/#custom-content ＆ http://api.jqueryui.com/tooltip/#option-items
var tempTitle = "";
$('a[title]').hover(
function(e){
e.preventDefault();
tempTitle = $(this).attr('title');
$(this).attr('title', '');
$(this).mousedown(
function(){
$(this).attr('title', tempTitle);
}
);
}
,
function() {
$(this).attr('title', tempTitle);
}
);
尝试它像一只狗！
我知道这是一篇关于jQuery的，但我只是跑在这个问题，并大多与lighboxes连接所以这里Mootools的修为iaian7媒体框高级图像链接，如果有人需要它的修补程序将在任何这些工作还HTTP：// line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts
if ($$('.lbThumb').length > 0) { // lbThumb a class or what ever you are using
$$('.lbThumb').each(function (el) { // same here , your a class
var savedtitle = el.get('title');
var getimage = el.getElement('img');
// must use image click since Mediabox will kill our a element click
getimage.addEvent('click', function () {
el.set('title',savedtitle );
});
// hide nasty a tooltip
el.addEvents({
mouseenter: function () {
el.erase('title');
},
// bring it back
mouseleave: function () {
el.set('title',savedtitle );
}
});
});
}
它的工作原理是这样：
重命名为sTitle，而不是默认的标题属性，如果你需要从jQuery的调用它：
的getAttribute（ 'stitle'）
它适用于所有。
您可以挂钩“的mouseenter”事件并返回false将停止显示本地提示。
$(selector).on( 'mouseenter', function(){ return false; });
var title;
$('a[title]').hover(function () {
title = $(this).attr('title');
$(this).attr('title','');
}, function () {
$(this).attr('title',title);
});
这里，你可能会发现有用的另一种副产品，如果你使用一个灯箱JS插件，还需要对灯箱幻灯片标题处理“标题”属性：
$('a.lightbox-trigger').each(function() { // Process all lightbox trigger links
$(this).mouseover(function() {
if(!$(this).data('keep')) // 1st time = FALSE, so make the swap
$(this).attr('data-title', $(this).attr('title')).attr('title', '');
$(this).data('keep', true); // Preserve value if hovered before clicked
});
$(this).mousedown(function() {
$(this).attr('title', $(this).attr('data-title')).attr('data-title', '');
$(this).data('keep', false); // Mark element as safe to swap again
});
});
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 一夜七次 的文章《隐藏使用jQuery原生的工具提示(Hide native tooltip using jQuery》','https://www.manongdao.com/article-973835.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}