Отключение всплывающих подсказок браузера по ссылкам и <abbr>с

Question

Я хочу отключить отображение всплывающей подсказки в браузере по умолчанию, когда пользователь наводит курсор на определенные ссылки и элементы. Я знаю, что это возможно, но я не знаю как. Кто-нибудь может помочь?

Причина этого состоит в том, чтобы скрыть всплывающую подсказку для микроформатированных дат. BBC отказался от поддержки 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();

Answer 1

Насколько я знаю, невозможно подавить показ заголовка.

Однако есть несколько обходных путей.

Предполагая, что вы хотите сохранить свойство 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;
        }
    }
}

Answer 2

Добавьте этот элемент в ваш HTML

    onmouseover="title='';"

Например, у меня есть флажок asp.net. Я храню скрытую переменную, но не хочу, чтобы пользователь видел ее как всплывающую подсказку.

Answer 3

Пробежал по этой теме при использовании плагина jQuery timeago . На самом деле решение очень простое, используя свойство CSS pointer-events. Размещать это на благо людей, заходящих сюда через поисковик :)

.suppress {
    pointer-events:none;
}

Обратите внимание, что вы не должны использовать это для таких вещей, как ссылки, которые должны переходить по ссылкам. В этом случае используйте принятое решение JS.

Answer 4

Нечто подобное в прототипе могло бы очистить все атрибуты заголовка микроформаты даты и времени с классом 'dtstart':

$$('abbr.dtstart').each(function(abbr){abbr.title=' '})

Примечание. Я использовал пробел, документация Mozilla для element.title states

Согласно ошибка 264001 , настройка заголовок пустой строки вызывает наследуемое поведение по умолчанию. Отменить наследование, заголовок должен быть установлен в непустая строка пробела.

Answer 5

Это то, что я сделал.

$('.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');
});

Answer 6

Это не поможет решить вашу проблему, но, тем не менее, может быть интересным: кроме title есть еще один универсальный атрибут, который можно использовать для хранения данных - lang!

Просто преобразуйте данные, которые вы хотите сохранить, в непрерывную строку и добавьте к ней префикс 'x-', чтобы объявить частное использование в соответствии с RFC 1766.

---

В комментариях sanchothefat уточнил, что он хочет решить проблемы юзабилити с помощью шаблона abbr-design-pattern в микроформатах. Но есть и другие модели, которые являются семантически значимыми (или, на мой взгляд, даже более), чем этот шаблон. Что бы я сделал:

<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;
}

Answer 7

Можно подавить это поведение с помощью 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>

1012 * скрипка *

Answer 8

Вы можете перехватить событие mouseenter и вернуть false, что остановит отображение собственных подсказок.

$(selector).on( 'mouseenter', function(){
    return false;
});