JTerser UI tooltip html z łączami

Question

Chcę używać podpowiedzi UI jquery.

W podpowiedzi chcę, aby był link w html.

Widziałem ten post (Jquery UI tooltip does not support html content), który mówi, jak pracować z html wewnątrz etykiety narzędzi.

Ale jest problem, gdy chcę dodać link wewnątrz etykiety narzędzi.

Kiedy przyjechałem z kursorem, aby wprowadzić podpowiedź dla kliknięciu linku tooltip zniknął (bo mouseOut od elementu przypisanej do podpowiedzi.

Co mogę zrobić?

Dzięki.

UPDATE:

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

Przykład: http://jsfiddle.net/jLkcs/

Answer 1

Ze względu na charakter podpowiedzi jQuery UI nie jest możliwe po wyjęciu z pudełka.

Możesz dodać sztuczkę (znajdującą się na forum jQuery, ale link utracił ...), aby etykieta opóźniała jej zamknięcie i pozwoliła ci na kliknięcie linków.

Używane Dokumentacja API: http://api.jqueryui.com/tooltip/

Kod:

$(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: http://jsfiddle.net/IrvinDominin/jLkcs/5/

Answer 2

Wygląda na to, że będziesz musiał zabrudzić sobie ręce i edytować kod jQuery, aby w przypadku zdarzenia mousout nie zamykał się, gdy przesuwasz kursor nad samą etykietą.

Alternatywnie można popatrzeć na podpowiedź i popover na twitter bootstrap, myślę, że z pamięci można przekazać typ wyzwalacza zdarzeń do popover.

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

Answer 3

Irvin Dominin zaakceptował odpowiedź była ogromna pomoc dla mnie w tej sprawie. Rozwinąłem na nim, jeśli ktokolwiek ma takie same dodatkowe wymagania, jakie miałem.

Chciałem również opóźnić wyświetlanie podpowiedzi. Ponieważ opcja "show" została ustawiona na null, musiałem ją powielić. (opcja show jest ustawiona na wartość null, aby zatrzymać wyskakujące okienko w sposób widoczny po przejściu myszy od etykiety narzędzia z powrotem do łącza dzwoniącego).

Musiałem odłożyć na później, ponieważ strona, którą tworzyłem miała wiele podpowiedzi dla użytkowników, a natychmiastowy wyświetlacz był nieco nieprzyjemny podczas przesuwania po stronie.

Moim rozwiązaniem było użycie zdarzenia otwartego, aby ukryć etykietkę narzędzia i dodać limit czasu przed wyświetleniem go ponownie. Wyjątkiem było to, że ta sama etykietka była już otwarta i aby ją posortować, dodałem atrybut true/false dla każdego elementu podczas otwierania/zamykania (pobieranie elementu źródłowego z funkcji otwierania i zamykania nie było łatwe, ale Myślę, że to prawda).

Nota prawna: Nie jestem mistrzem w JQuery i może być o wiele łatwiejszy sposób na skopiowanie tego. I utknąć w dół króliczej dziury z kodem Czasami więc poniższy kod może być złe rady ...

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

pamiętać, że również dodać kilka klas i pozycjonowanie do moich pop-upów, aby umieścić strzałę do łącza wywołującego. Dodatkowo moja treść pochodzi z pliku obiektu użytkownika załadowanego na stronę. Usunąłem je, aby, mam nadzieję, ułatwić korzystanie z nich.