Как отключить всплывающую подсказку в браузере с помощью 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>

Ответ 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.

Update:

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

Это не так просто, как и должно быть, потому что IE не правильно удаляет всплывающую подсказку в событии hover, если вы устанавливаете атрибут title на null или удаляете атрибут title. Однако, если вы установите подсказку на пустую строку ("") при наведении, она удалит всплывающую подсказку из всех браузеров, включая 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'));
    });
});

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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