Làm thế nào để vô hiệu hóa tooltip trong trình duyệt với jQuery?

Question

Có cách nào để tắt chú giải công cụ trình duyệt không hiển thị khi di chuột qua các phần tử có thuộc tính 'tên' được điền không? Lưu ý rằng tôi không muốn xóa nội dung tiêu đề. Dưới đây là các mã được yêu cầu:

$(document).ready(function() { 
    $('a.clickableSticky').cluetip({ 
     splitTitle: '|', 
     showTitle: false, 
     titleAttribute: 'description', 
     activation: 'click', 
     sticky: true, 
     arrows: true, 
     closePosition: 'title' 
    }); 
}); 

và trong 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

Bạn có thể sử dụng jQuery để loại bỏ các nội dung của attribte tiêu đề, hoặc di chuyển nó vào một số thông số khác để sử dụng sau .

Điều này có nghĩa là bạn mất một số trợ năng.

RE: ClueTip Tìm kiếm của Google dường như cho thấy đây là vấn đề phổ biến - điều này chỉ xảy ra trong IE? ClueTip dường như hoạt động như dự kiến ​​trong FireFox.

Answer 2

Bạn có thể xóa thuộc tính title khi tải trang.

$(document).ready(function() { 
    $('[title]').removeAttr('title'); 
}); 

Nếu bạn cần sử dụng tiêu đề sau, bạn có thể lưu nó trong phần tửcủa phần tử.

$(document).ready(function() { 
    $('[title]').each(function() { 
     $this = $(this); 
     $.data(this, 'title', $this.attr('title')); 
     $this.removeAttr('title'); 
    }); 
}); 

Một lựa chọn khác là thay đổi tên của thuộc tính title-aTitle, hay cái gì khác mà trình duyệt sẽ bỏ qua, và sau đó cập nhật bất kỳ hoạt Javascript để đọc tên thuộc tính mới thay vì title.

Cập nhật:

Một ý tưởng thú vị bạn có thể sử dụng là "uể oải" loại bỏ các tiêu đề khi lơ lửng trên một phần tử. Khi người dùng di chuyển ra khỏi phần tử, bạn có thể đặt lại giá trị tiêu đề.

Điều này không đơn giản vì IE không loại bỏ đúng chú giải công cụ trên sự kiện di chuột nếu bạn đặt thuộc tính tiêu đề thành null hoặc xóa thuộc tính tiêu đề. Tuy nhiên, nếu bạn đặt chú giải công cụ thành chuỗi trống ("") khi di chuột, công cụ sẽ xóa chú giải công cụ khỏi tất cả các trình duyệt bao gồm Internet Explorer.

Bạn có thể sử dụng phương pháp tôi đã đề cập ở trên để lưu trữ thuộc tính tiêu đề trong phương thức data(...) của jQuery và sau đó đặt nó trở lại 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 3

Hack lên ClueTip để sử dụng thuộc tính tiêu đề đã đổi tên.

Answer 4

Đây là hiện đại jQuery cách để làm điều đó (IMO) ...

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

... và dĩ nhiên, đọc thuộc tính phía sau title được thực hiện với ...

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

Answer 5

Tiếp theo đề nghị Dan Herbert của trên, đây là mã:

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

Answer 6

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

Hi all. Tôi đang sử dụng giải pháp này và nó hoạt động tốt trong tất cả các trình duyệt.

Answer 7

Như tôi cần chức năng này sẽ có sẵn trong hành động khác (như màn hình sao hoặc chọn màu sắc,) giải pháp của tôi chứa hai hàm được gọi khi mà hành động bắt đầu và khi nó kết thúc:

$.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 không thể được sử dụng vì các phần tử khác có thể nằm trên phần tử có tiêu đề (như một hình ảnh trong div có tiêu đề) và hơn mouseOut sẽ xuất hiện ngay khi di chuột qua phần tử bên trong (hình ảnh!)

Tuy nhiên khi sử dụng mouseMove bạn nên chú ý vì sự kiện cháy nhiều lần. Để tránh xóa dữ liệu đã lưu, trước tiên hãy kiểm tra xem tiêu đề có trống không!

Dòng cuối cùng trong RemoveTitles, cố gắng khôi phục tiêu đề từ phần tử mà chuột không thoát khi gọi kết thúc bằng mouseClick hoặc trên phím tắt.