jQuery: Làm thế nào để loại bỏ các tooltip tipsy?

Question

Tôi thêm chú giải công cụ mẹo vào div với lớp .placeTaken. Sau đó, người dùng có thể kéo các hộp xung quanh, vì vậy tôi xóa lớp và thêm nó vào một div mới thay thế. Khi điều này xảy ra, tôi thêm một tooltip lời khuyên mới cho div đó và nó hoạt động tốt, nhưng tôi muốn loại bỏ cái cũ.

Họ nói nếu bạn muốn xóa chú giải công cụ bằng cách đặt thuộc tính tiêu đề thành chuỗi trống, hãy đặt thuộc tính title-title thay thế. Tôi đã thử $("#"+dropFromId).attr("original-title", ""); nhưng chú giải công cụ vẫn ở đó. Tôi thậm chí không thể thay đổi tiêu đề chú giải công cụ bằng cách đặt một tựa đề gốc khác.

Tôi đang làm gì sai?

Chỉnh sửa: Tôi đoán tôi đã không cung cấp cho bạn đủ thông tin. Tôi sử dụng ajax để lấy các địa điểm được lấy từ cơ sở dữ liệu. PHP trả về một mảng kết hợp (khách hàng) mà sau đó tôi sử dụng trong JavaScript của tôi, nơi địa điểm đã thực hiện khớp với tên. Các địa điểm được thực hiện thay đổi khi thả, vì vậy tôi thực hiện lại chức năng ajax để cập nhật mảng với tất cả các địa điểm đã chụp. Tại nắm tay, tôi thêm chú giải công cụ mẹo cho tất cả các địa điểm được chụp như vậy

$("#map div.placeTaken").tipsy({gravity: 'w', html: true, fade: true, title: 
    function(){ 
     // id could for example be map74, substring to 74 
     var id = $(this).attr("id").substring(3,6); 
     return '<div>'+customers[id]+'</div><br />'; 
    } 
}); 

Vì vậy, tiêu đề bằng với địa điểm phù hợp với địa điểm đó trong mảng. Tôi hy vọng rằng tôi đang giải thích điều này đủ tốt. Khi hộp được giảm ở một nơi mới, đây là những gì xảy ra

$("#map div span").bind("dragstop", function(event, ui) { 
     // some code here to change the .placeTaken class  
     // update database with the new place 
     $.ajax({ 
      type: "POST", 
      url: "map.php", 
      data: "dropFromId="+ dropFromId.substring(3,6) +"& dropToId="+ dropToId.substring(3,6), 
      success: function(){ 
      // ajax function to update the js array with new places 
      customerTooltip(); 
      } 
     }); 

     // on this place, add tooltip 
     $("#"+dropToId).tipsy({gravity: 'w', html: true, fade: true, title: 
      // funktion för att avgöra vilken title som ska användas 
      function(){ 
       var id = dropToId.substring(3,6); 
       return '<div>'+customers[id]+'</div><br />'; 
      } 
     }); 
    } 
}); 

này tất cả hoạt động tốt, vì vậy tôi nghĩ rằng tôi muốn chỉ đơn giản là thay đổi tiêu đề dropFromId để "" trên thả, vì vậy mà tôi loại bỏ nó .

Answer 1

$("#"+dropFromId)[0].setAttribute('original-title', '') 

Answer 2

$("#tipsyfiedElement").unbind('mouseenter mouseleave'); // Or whatever event trigger the tiptool 

Answer 3

Sử dụng $(".tipsy").remove(); dường như làm các trick kể từ một div với một lớp tipsy được gắn vào phần thân của doc khi tooltip được hiển thị.

Chỉ cần chắc chắn bạn không sử dụng một lớp tipsy nơi khác (ví dụ gọi một cái gì đó của tooltip của bạn như toolTip thay)

Answer 4

Gần đây tôi có vấn đề này, dưới đây là cách tôi giải quyết nó:

Sử dụng này để thiết lập thuộc tính ban đầu-tiêu đề để 'stop':

$('.myElement').attr('original-title','stop'); 

sau đó, trong jquery.tipsy.js, thay đổi mã như sau:

... 
} else if (typeof opts.title == 'function') { 
    title = opts.title.call(this); 
} 

if (title != 'stop') { //line 32 
    ... 
    ... 
}       //line 62 
... 

Trong phiên bản mới của tôi (0.1.7) mã được thêm vào bắt đầu tại dòng 32 và kết thúc khung ở dòng 62. Tipsy sẽ thấy rằng thuộc tính tiêu đề của bạn bằng 'stop' và sẽ không cố gắng để mở tooltip.

Ngoài ra, điều này sẽ phát sinh một số lỗi cho bảng điều khiển. Nó không thực hiện bất kỳ sự khác biệt, nhưng nếu bạn muốn để có được thoát khỏi nó, thêm này tại dòng 73 (sau khi thêm mã trước)

try { tip.remove(); } catch(err){} 

POW

Answer 5

Cách đơn giản nhất để loại bỏ ngà ngà say;

$('.tipsy:last').remove(); 

Answer 6

Nếu bạn không muốn hiển thị thêm, chỉ cần sử dụng .tipsy('disable') trên phần tử.

Nếu bạn đang sử dụng trigger: manual và bạn muốn ẩn nó, bạn chỉ có thể xóa div .tipsy trên cơ thể.

Ngoài ra còn có disableenable và toggleEnabled

Answer 7

Sử dụng: .unbind ('mouseenter MouseLeave'); để xóa phương pháp mẹo.

Answer 8

Tôi đã thấy câu hỏi này sau khi Googling một tình huống vô hiệu hóa Mẹo khi trên thiết bị di động do sự phức tạp với sự kiện chạm/bấm, cụ thể trên iPad.

Giải pháp mà tôi đã quyết định triển khai là thêm một thử nghiệm nhỏ ở đầu tệp jquery.tipsy.js.

Để vô hiệu hóa Mẹo trên thiết bị cảm ứng (di động): var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) || 
deviceAgent.match(/(android)/) || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i)); 

function Tipsy(element, options) { 
    this.$element = $(element); 
    this.options = options; 
    this.enabled = !isTouchDevice; 
    this.fixTitle(); 
}; 

See: The best way to detect if user agent supports touch

Answer 9

dễ dàng hơn cách im sử dụng:

$('body').find('.tipsy').each(function(){ 
    $(this).remove(); 
});