Как отключить всплывающую подсказку в браузере с помощью jQuery?

Question

Есть ли способ отключить отображение всплывающей подсказки браузера при наведении указателя мыши на элементы с атрибутом 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>

Answer 1

Вы можете удалить атрибут 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.

Обновление:

Интересная идея, которую вы могли бы использовать, это «лениво» удалять заголовок при наведении на элемент. Когда пользователь наводит курсор на элемент, вы можете вернуть значение заголовка обратно.

Это не так просто, как должно быть, потому что IE неправильно удаляет всплывающую подсказку при событии наведения мыши, если для атрибута title установлено значение null или атрибут title. Однако если при наведении курсора на пустую строку ("") установить всплывающую подсказку, эта подсказка будет удалена из всех браузеров, включая Internet Explorer.

Вы можете использовать метод, который я упомянул выше, чтобы сохранить атрибут title в методе data(...) jQuery и затем вернуть его на 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'));
    });
});

Answer 2

Вот современный jQuery способ сделать это (IMO) ...

$('[title]').attr('title', function(i, title) {
    $(this).data('title', title).removeAttr('title');
});

... и, конечно, чтение атрибута title выполняется с помощью ...

$('#whatever').data('title');

Answer 3

Следуя предложению Дэна Герберта выше, вот код:

$(element).hover(
    function () {
        $(this).data('title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function () {
        $(this).attr('title', $(this).data('title'));
    });

Answer 4

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

Привет всем. Я использую это решение, и оно отлично работает во всех браузерах.

Answer 5

Вы можете использовать jQuery для удаления содержимого атрибута title или переместить его в какой-либо другой параметр для дальнейшего использования.

Это означает, что вы потеряете некоторую доступность.

RE: ClueTip Похоже, что поиск в Google наводит на мысль, что это обычная проблема - разве это происходит только в IE? ClueTip, кажется, работает как и ожидалось в FireFox.

Answer 6

Взломайте ClueTip, чтобы использовать переименованный атрибут title.

Answer 7

Поскольку мне нужно, чтобы эта функциональность была доступна во время другого действия (например, для экрана копирования или выбора цвета), мое решение содержит две функции, которые должны быть вызваны при запуске и завершении этого действия:

$.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 предпринимается попытка восстановить заголовок из элемента, из которого мышь не вышла при вызове конца по mouseClick или по сочетанию клавиш.