Отключение подсказок браузера по ссылкам и <abbr> s
Я хочу отключить отображение всплывающей подсказки по умолчанию для веб-браузера, когда пользователь наводится на определенные ссылки и элементы. Я знаю, что это возможно, но я не знаю, как это сделать. Может ли кто-нибудь помочь?
Причиной этого является подавление всплывающей подсказки для микроформатированных дат-времени. Би-би-си отказалась от поддержки hCalendar, потому что появлением машиносчитываемой даты была проблема доступности для людей с когнитивными нарушениями, а также для некоторых пользователей с экрана. http://www.bbc.co.uk/blogs/bbcinternet/2008/07/why_the_bbc_removed_microforma.html
EDIT:
Я взбивал плагин jquery по тем же строкам, что и предложение Арона...
// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
$(".dtstart,.dtend,.bday").hover(function(){
$(this).attr("ufdata",$(this).attr("title"));
$(this).removeAttr("title");
},function(){
$(this).attr("title",$(this).attr("ufdata"));
$(this).removeAttr("ufdata");
});
}
})(jQuery);
// Usage
$.ufsuppress();
Ответы
Ответ 1
Насколько я знаю, невозможно фактически запретить показ тега title.
Однако существуют некоторые обходные пути.
Предполагая, что вы хотите сохранить свойство title в своих ссылках и элементах, вы можете использовать Javascript для удаления свойства title в onmouseover()
и снова установить его в onmouseout()
.
// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].className == 'suppress') {
links[i]._title = links[i].title;
links[i].onmouseover = function() {
this.title = '';
}
links[i].onmouseout = function() {
this.title = this._title;
}
}
}
Ответ 2
Добавьте этот элемент в свой html
onmouseover="title='';"
Например, я устанавливаю флажок asp.net. Я храню скрытую переменную, но не хочу, чтобы пользователь отображал ее как подсказку.
Ответ 3
Перейдите по этой теме при использовании плагина jQuery timeago. На самом деле решение очень просто, используя свойство CSS pointer-events
. Проводя это в интересах людей, приезжающих сюда через поисковую систему:)
.suppress {
pointer-events:none;
}
Обратите внимание, что вы не должны использовать это для таких вещей, как ссылки, которые должны переходить к чему-то. В этом случае используйте принятое решение JS.
Ответ 4
Что-то вроде этого в прототипе пуст все атрибуты заголовка datetime microformats с классом 'dtstart':
$$('abbr.dtstart').each(function(abbr){abbr.title=' '})
Примечание. Я использовал пустое пространство, документацию Mozilla для element.title утверждает
В соответствии с ошибка 264001, установка заголовок пустой строки запускает по умолчанию наследует поведение. Отменить наследование, заголовок должен быть установлен на непустая строка пробелов.
Ответ 5
Это не поможет с вашей проблемой, но может быть интересным тем не менее: существует еще один универсальный атрибут помимо title
, который можно использовать для хранения данных - lang
!
Просто преобразуйте данные, которые вы хотите сохранить, в непрерывную строку и префикс с помощью 'x-'
, чтобы объявить частное использование в соответствии с RFC 1766.
В комментариях sanchothefat пояснил, что он хочет решить проблемы удобства использования с шаблоном abbr-design в микроформатах. Но есть и другие шаблоны, которые являются семантически значимыми (или, на мой взгляд, даже более), чем этот шаблон. Что я буду делать:
<p>
The party is at
<dfn class="micro-date">10 o'clock on the 10th
<var>20051010T10:10:10-010</var></dfn>.
</p>
вместе эти стили
dfn.micro-date {
font-weight: inherit;
font-style: inherit;
}
dfn.micro-date var {
display: none;
}
На мой взгляд, семантически наиболее правильным способом было бы использовать список определений dl
, который недопустим внутри абзацев. Это можно обойти со следующим шаблоном:
<p>
The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>
<dl id="micro-dates">
<dt>10 o'clock on the 10th</dt>
<dd>20051010T10:10:10-010</dd>
</dl>
для которого требуется более сложная таблица стилей:
q[cite='#micro-dates']:before {
content: '';
}
q[cite='#micro-dates']:after {
content: '';
}
dl#micro-dates {
display: none;
}
Ответ 6
Это то, что я сделал.
$('.fancybox').hover(
function(){
$(this).attr('alt',$(this).attr('title'));
$(this).attr('title','');
},
function(){
$(this).attr('title',$(this).attr('alt'));
$(this).removeAttr('alt');
}
).click(function(){
$(this).attr('title',$(this).attr('alt'));
$(this).removeAttr('alt');
});
Ответ 7
Вы можете подключить событие "mouseenter" и вернуть значение false, которое остановит отображение всплывающих подсказок.
$(selector).on( 'mouseenter', function(){
return false;
});
Ответ 8
Это можно подавить с помощью jQuery
var tempTitle;
$('[title]').hover(
function(e) {
debugger;
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);
}
);
.progress3 {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.progress3:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.progress3:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
title='abc' will not be displayed
</div>