Etykietka interfejsu użytkownika Jquery. Ustaw limit czasu i ustaw zdarzenia najechania. Zatrzymaj tooltip na mouseover

Question

Mam googleed około 2 dni i nie mogę dowiedzieć się, jak ustawić limit czasu dla http://api.jqueryui.com/tooltip/ ???

Może powinienem używać jquery hoverIntent?

tutaj jest mój kod

$('*[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

próbował tego?

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

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

Answer 2

Spojrzałem również dla podobnego rozwiązania, pokazując podpowiedź normalnie, ale po najechaniu myszką na etykiecie powinna pozostać (treść podpowiedzi to niektóre przyciski).

Nie chcę całej struktury (qtip), aby to zrobić, już używam jqUI na całej mojej stronie.

więc zrobiłem to:

$(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

mam dobre rozwiązanie, inspirowane 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'); 
}); 

[Aktualizacja:. Amit Added a gist dla powyższego rozwiązania z poprawkami]

Answer 4

Ta wersja zapewnia widoczność podpowiedzi na tyle długo, aby użytkownik mógł przesuwać mysz nad etykietkę narzędziową i pozostaje widoczny aż do usunięcia myszki. Poręczny, ponieważ pozwala użytkownikowi wybrać tekst z podpowiedzi. Część kodu pochodzi od 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> 

Próbka: http://jsfiddle.net/A44EB/123/

Answer 5

wariantu odpowiedzi od @naveen. Trwa to, ale z jQuery UI easing nie pokazuje się w ogóle aż do ostatniej połowy czasu (400 ms w tym przypadku 800ms). Jeśli użytkownik nie będzie trzymał myszki w ukryciu, działa to tak jak zamiana kursora, ponieważ etykieta narzędzia nigdy nie będzie dostępna. Prosty, elegancki sposób na rozwiązanie problemu.

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

Answer 6

Lubię to ustawiania 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>