jquery UI tooltip html với các liên kết

Question

Tôi muốn sử dụng chú giải công cụ giao diện người dùng jquery.

Trong chú giải công cụ, tôi muốn rằng sẽ có một liên kết trong html.

Tôi thấy bài đăng này (Jquery UI tooltip does not support html content) cho biết cách làm việc với html bên trong chú giải công cụ.

Nhưng có sự cố khi tôi muốn thêm liên kết bên trong chú giải công cụ.

Khi tôi đến với con trỏ để vào tooltip cho cách nhấn vào liên kết, các tooltip biến mất (vì tôi mouseout từ các yếu tố giao cho tooltip.

tôi có thể làm gì?

Cảm ơn.

UPDATE:

$(function() { 
     $(document).tooltip({ 
      content: function() { 
       return $(this).prop('title'); 
      } 
     }); 
    }); 

Ví dụ: http://jsfiddle.net/jLkcs/

Answer 1

Do tính chất của chú giải công cụ UI jQuery không thể thoát ra khỏi hộp.

Bạn có thể thêm một số mẹo (tìm thấy trên diễn đàn jQuery, nhưng liên kết bị mất ...) để chú giải công cụ trì hoãn việc đóng và cho phép bạn có thời gian nhấp vào liên kết.

đã qua sử dụng tài liệu api: http://api.jqueryui.com/tooltip/

Code:

$(function() { 
    $(document).tooltip({ 
     content: function() { 
      return $(this).prop('title'); 
     }, 
     show: null, 
     close: function (event, ui) { 
      ui.tooltip.hover(
      function() { 
       $(this).stop(true).fadeTo(400, 1); 
      },  
      function() { 
       $(this).fadeOut("400", function() { 
        $(this).remove(); 
       }) 
      }); 
     } 
    }); 
}); 

Demo: Câu trả lời được chấp nhận http://jsfiddle.net/IrvinDominin/jLkcs/5/

Answer 2

Có vẻ như bạn sẽ phải làm bẩn tay và chỉnh sửa mã jQuery sao cho sự kiện mousout không đóng nếu bạn đang di chuột qua chú giải công cụ.

Hoặc thay vào đó bạn có thể xem chú giải công cụ và cửa sổ bật lên twitter, tôi nghĩ từ bộ nhớ, bạn có thể chuyển loại trình kích hoạt sự kiện cho cửa sổ bật lên.

http://getbootstrap.com/2.3.2/javascript.html#popovers

Answer 3

Irvin Dominin là một sự trợ giúp rất lớn đối với tôi về vấn đề này. Tôi đã mở rộng nó nếu có ai có cùng yêu cầu bổ sung mà tôi có.

Tôi cũng muốn đặt độ trễ trên màn hình hiển thị chú giải công cụ. Bởi vì tùy chọn "hiển thị" được đặt thành null, tôi cần sao chép nó. (tùy chọn hiển thị được đặt thành null để dừng cửa sổ bật lên rõ ràng vẽ lại khi chuột di chuyển từ chú giải công cụ trở lại liên kết gọi).

Tôi cần phải trì hoãn, vì trang tôi đang phát triển có rất nhiều chú giải công cụ người dùng và hiển thị tức thì hơi chói tai khi di chuột qua trang.

Giải pháp của tôi là sử dụng sự kiện mở để ẩn chú giải công cụ và thêm thời gian chờ trước khi hiển thị lại. Ngoại lệ cho điều này là nếu cùng một tooltip đã được mở, và để sắp xếp, tôi thêm thuộc tính data/false vào mỗi phần tử khi mở/đóng nó (lấy phần tử nguồn từ các hàm mở và đóng không dễ, nhưng Tôi nghĩ nó đúng).

Tuyên bố từ chối trách nhiệm: Tôi không phải là người chủ tại JQuery và cũng có thể có cách dễ dàng hơn để tái tạo điều này. Tôi gặp khó khăn xuống thỏ lỗ với mã đôi khi, vì vậy mã dưới đây có thể là lời khuyên xấu ...

var ttWait; // global variable for tooltip delay 
$(document).tooltip({ 
    items: '.userSummaryLink', 
    show: null, 
    content: function() { // build the popup content 
     return $(this).prop('title'); 
    }, 
    open: function (event, ui) { // simulating the show option (that needs to be null to stop the popup closing and reopening when user mouses from popup back to source 
     var el = $(event.originalEvent.target); 
     if(!el.data('tooltip')) { // only put open delay if SAME popup not already open 
      ui.tooltip.hide(); // stop popup opening immediately 
      ttWait = setTimeout(function() { // show popup after delay 
       el.data("tooltip", true); // acknowledge popup open 
       ui.tooltip.fadeIn("400"); 
      }, 250); 
     } 
    }, 
    close: function (event, ui) { 
     var el = $(event.originalEvent.target); 
     el.data("tooltip", false); // acknowledge popup closed (might be over-ridden below) 
     clearTimeout(ttWait); // stop tooltip delay function 
     ui.tooltip.hover(
      function() { 
       $(this).stop(true).fadeTo(400, 1); 
       el.data("tooltip", true); // acknowledge popup still open 
      }, 

      function() { 
       $(this).fadeOut("400", function() { 
        $(this).remove(); 
       }); 
      }); 
    } 
}); 

Lưu ý rằng tôi cũng đã thêm một số lớp học và định vị để popup tôi để đặt dấu mũi tên để liên kết gọi. Ngoài ra, nội dung của tôi được lấy từ tệp đối tượng người dùng được tải trên trang. Tôi đã xóa những thứ này để hy vọng sẽ dễ sử dụng hơn.