jquery UI tooltip html con collegamenti

Question

Desidero utilizzare il tooltip dell'interfaccia utente jquery.

Nel tooltip voglio che ci sia un collegamento in html.

Ho visto questo post (Jquery UI tooltip does not support html content) che dice come lavorare con html all'interno del tooltip.

Ma c'è un problema quando voglio aggiungere il link all'interno del suggerimento.

Quando sono venuto con il cursore per inserire il suggerimento per fare clic sul collegamento, il tooltip scomparsi (perché ho mouseOut dall'elemento della assegnata al tooltip.

Che cosa posso fare?

Grazie.

UPDATE:

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

Esempio: http://jsfiddle.net/jLkcs/

Answer 1

A causa della natura del tooltip jQuery UI non è possibile, fuori dalla scatola.

È possibile aggiungere qualche trucco (trovato nel forum di jQuery, ma collegamento perso ...) per lasciare che il suggerimento ritardi la chiusura e lasciare che sia il momento di fare clic sui collegamenti.

usati API docs: http://api.jqueryui.com/tooltip/

Codice:

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

Answer 2

Sembra che dovresti sporcarti le mani e modificare il codice jQuery in modo che sull'evento del mousout non si chiuda se stai passando il mouse sopra il suggerimento stesso.

Oppure, in alternativa, è possibile visualizzare il tooltip e il popover di twitter bootstrap, penso che dalla memoria si possa passare un tipo di evento al popover.

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

Answer 3

Irvin Dominin è stato un grande aiuto per me su questo. Ho ampliato su di esso se qualcuno ha lo stesso requisito aggiuntivo che ho avuto.

Volevo anche mettere un ritardo sul display del tooltip. Poiché l'opzione "mostra" era impostata su null, avevo bisogno di replicarla. (l'opzione show è impostata su null per fermare il popup visibilmente ridisegnato quando il mouse passa dal tooltip al link di chiamata).

Avevo bisogno di mettere un ritardo, dal momento che una pagina che stavo sviluppando aveva un sacco di tooltip utente, e la visualizzazione istantanea era un po 'stonata quando passava il mouse sulla pagina.

La mia soluzione era utilizzare l'evento open per nascondere la descrizione e aggiungere un timeout prima di visualizzarla di nuovo. L'eccezione era che se lo stesso suggerimento fosse già aperto, e per ordinarlo ho aggiunto un attributo di dati vero/falso a ciascun elemento quando lo si apriva/chiudeva (ottenere l'elemento sorgente dalle funzioni di apertura e chiusura non era facile, ma Penso sia giusto).

Disclaimer: Non sono un maestro di JQuery e potrebbe esserci un modo molto più semplice per replicare questo. Vengo bloccato giù coniglio-fori con codice a volte, in modo che il codice qui sotto potrebbe essere un cattivo consiglio ...

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

Si noti che ho anche aggiunto alcune classi e il posizionamento ai miei popup per mettere una freccia per il collegamento di chiamata. Inoltre il mio contenuto derivava da un file oggetto utente caricato sulla pagina. Ho rimosso questi per renderlo più facile da usare.