Tooltip dell'interfaccia utente di Jquery. Imposta il timeout e imposta gli eventi di hover. Blocca tooltip sul passaggio del mouse

Question

Ho cercato su Google circa 2 giorni e non riesco a capire come impostare il timeout per http://api.jqueryui.com/tooltip/ ???

Forse dovrei usare jquery hoverIntent?

Ecco il mio codice

$('*[class*="help_"]').tooltip({ 
    open: function(e,o){ 
     $(o.tooltip).mouseover(function(e){ 
      $('*[class*="help_"]').tooltip('open'); 
     }); 
     $(o.tooltip).mouseout(function(e){ 
     });   
    }, 
    close: function(e,o) {} 
}); 

Answer 1

provato questo?

$(".selector").tooltip({ show: { duration: 800 } }); 

Link: http://api.jqueryui.com/tooltip/#option-show

Answer 2

ho anche guardato per una soluzione simile, mostrando il tooltip normalmente, ma quando mouseover sul tooltip deve rimanere (il contenuto di un tooltip è alcuni pulsanti).

Non voglio un intero framework (qtip) per farlo, sto già utilizzando jqUI in tutto il mio sito.

così ho fatto questo:

$(document).tooltip({ 
    show: null, // show immediately 
    items: '.btn-box-share', 
    hide: { 
    effect: "", // fadeOut 
    }, 
    open: function(event, ui) { 
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast"); 
    }, 
    close: function(event, ui) { 
    ui.tooltip.hover(
     function() { 
      $(this).stop(true).fadeTo(400, 1); 
      //.fadeIn("slow"); // doesn't work because of stop() 
     }, 
     function() { 
      $(this).fadeOut("400", function(){ $(this).remove(); }) 
     } 
    ); 
    } 
}); 

Answer 3

ho una buona soluzione, ispirata a jQuery forum thread:

var mouseLeaveTimer; 
$('.selector').tooltip(
    open: function(){ 
     // make sure all other tooltips are closed when opening a new one 
     $('.selector').not(this).tooltip('close'); 
    } 
}).on('mouseleave', function(e){ 
    var that = this; 

    // close the tooltip later (maybe ...) 
    mouseLeaveTimer = setTimeout(function(){ 
     $(that).tooltip('close'); 
    }, 100); 

    // prevent tooltip widget to close the tooltip now 
    e.stopImmediatePropagation(); 
}); 

$(document).on('mouseenter', '.ui-tooltip', function(e){ 
    // cancel tooltip closing on hover 
    clearTimeout(mouseLeaveTimer); 
}); 

$(document).on('mouseleave', '.ui-tooltip', function(){ 
    // make sure tooltip is closed when the mouse is gone 
    $('.selector').tooltip('close'); 
}); 

[Aggiornamento:. Amit Added a gist per la soluzione di cui sopra con correzioni]

Answer 4

Questa versione garantisce che il tooltip rimanga visibile abbastanza a lungo da consentire all'utente di spostare il mouse sulla descrizione e rimanere visibile fino al passaggio del mouse. Comodo per consentire all'utente di selezionare del testo dal suggerimento. Parte del codice proviene da Antonimo.

$(document).on("click", ".tooltip", function() { 
    $(this).tooltip(
     { 
      items: ".tooltip", 
      content: function(){ 
       return $(this).data('description'); 
      }, 
      close: function(event, ui) { 
       var me = this; 
       ui.tooltip.hover(
        function() { 
         $(this).stop(true).fadeTo(400, 1); 
        }, 
        function() { 
         $(this).fadeOut("400", function(){ 
          $(this).remove(); 
         }); 
        } 
       ); 
       ui.tooltip.on("remove", function(){ 
        $(me).tooltip("destroy"); 
       }); 
      }, 
     } 
    ); 
    $(this).tooltip("open"); 
}); 

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a> 

Esempio: http://jsfiddle.net/A44EB/123/

Answer 5

Una variante sulla risposta da @naveen. Questo ha una durata, ma con jQuery UI easing non mostra affatto fino a oltre la metà della durata (400ms in questo caso di 800ms). Se l'utente non mantiene il mouse al passaggio del mouse, questo funziona come l'intento del passaggio del mouse poiché il suggerimento non sarà mai disponibile. Modo semplice ed elegante per risolvere il problema.

$(".selector").tooltip({ show: { easing: "easeInExpo", duration: 800 } }); 

Answer 6

Mi piace questo per impostare il timeout:

$(document).tooltip({ 
    open: function(event, ui) { 
     ui.tooltip.delay(5000).fadeTo(2000, 0); 
    } 
}); 

Answer 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title> dynamic jquery ui tooltip </title> 

    <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
    <style> 
      #listing { 
       margin-left: 50px ; 
      } 
      .ui-tooltip { 
       background: #AAABBB ; 
       -webkit-box-shadow: 0 0 10px #aaa; 
       box-shadow: 0 0 10px #aaa; 
      } 
      body .ui-tooltip { 
       border-width: 4px; 
      } 
    </style> 
</head> 
<body> 
<div id="listing"> 
<div class="item-heading" id="item-1" > link-1 </div> 
</br> 
</br> 
<div class="item-heading" id="item-2"> link-2</div> 
</div> 
    <script> 

    // courtesy of: http://stackoverflow.com/a/15014759/65706 
    // and : http://stackoverflow.com/a/23487435/65706 
    $(document).tooltip({ 
     items: ".item-heading" 
     // set static content to the tooltip 
     // , content: '<p> <a href="http://www.google.com"> go to google </a>' 
     // or 
     // set a dynamic content based on the selected element id 
     , content: function() { 
       //attribute title would do it as well for non html5 
       //also any custom attribute name would do it for html5 
       var el_id= $(this).attr('id'); 
       var id=el_id.split('-')[1]; 
       var d_link = "http://www.somesite.com/page.php?id=" + id ; 
       d_link = "<p><a href=\"" + d_link + "\"> go to link " + 
       id + " </a></p>" ; 
       return d_link ; 
     } 
     , open: function(event, ui) { 
       ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "fast"); 
      } 
     , close: function(event, ui) { 
       ui.tooltip.hover(
        function() { 
        $(this).stop(true).fadeTo(400, 1); 
         //.fadeIn("slow"); // doesn't work because of stop() 
        }, 
        function() { 
         $(this).fadeOut("400", function(){ $(this).remove(); }) 
        } 
       ); 
     } 
}); 
    </script> 
</body> 
</html>