Jquery UI info-bulle. Définir le délai d'attente et jeu hover événements. Gel info-bulle sur mouseover

J'ai googlé sur 2 jours et ne pouvez pas comprendre comment définir le délai d'attente pour la http://api.jqueryui.com/tooltip/ ???

Je devrais peut-être utiliser jquery hoverIntent ?

voici mon code

$('*[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) {}
});

OriginalL'auteur mindsupport | 2012-11-08

  1. 38

    J'ai aussi cherché une solution similaire, montrant l'info-bulle normalement, mais lors du passage de la souris sur l'info-bulle, il devrait rester (le contenu d'une info-bulle est certains boutons).

    Je ne veux pas d'un ensemble cadre(qtip) pour le faire, je suis déjà en utilisant jqUI tous sur mon site.

    j'ai donc fait ceci:

    $( 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(); })
        }
    );
  }
});
    cela m'a aidé, mais j'ai dû enlever open: partie, sinon tout a été voler autour de
    oui c'est facultatif..
    C'était un épargnant de vie - bien, ok, pas tout à fait une "vie" de veille, mais j'ai cherché un peu partout et c'était la seule option que j'ai trouvé qui fonctionne.
    Génial! J'ai été en mesure d'utiliser fadeIn() au lieu de fadeTo(400,1). Peut-être que quelque chose s'est fixé entre alors et maintenant. J'aurais aussi pu appeler fadeOut( function() {..} ); sans préciser le délai et il a utilisé le défaut de fondu de sortie millis (400). Juste pour info pour quelqu'un d'autre d'essayer cela. Merci!

    OriginalL'auteur Hontoni

  2. 7

    J'ai une bonne solution, inspirée par jQuery fil de discussion du forum : 

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

    [Mise à jour:Amit Ajout d'une gist pour la solution ci-dessus avec les corrections.]

    Cette solution fonctionne mieux que celui de @Antonimo, parce que vous avez une mise en œuvre d'un bon close méthode dans l'info-bulle.

    OriginalL'auteur Fabien Quatravaux

  3. 4

    J'aime cette pour définir le délai d'expiration:

     $(document).tooltip({
     open: function(event, ui) {
         ui.tooltip.delay(5000).fadeTo(2000, 0);
     }
 });
    Cela a fonctionné pour moi! Merci beaucoup

    OriginalL'auteur webaholik

  4. 2

    Essayé cela?

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

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

    Oui essayé, lorsque la durée est sans effet nom qu'il utilise par défaut "fadeIn" en effet, si c'est juste la durée de fadeIn
    c'est settimeout, qu'est-ce que votre exigence exacte?
    j'ai juste besoin d'afficher les info-bulle lors du passage de la souris sur la bulle d'aide )

    OriginalL'auteur naveen

  5. 0

    Cette version assure l'info-bulle reste visible assez longtemps pour l'utilisateur de déplacer la souris sur l'info-bulle et reste visible jusqu'à ce mouseout. Pratique pour permettre à l'utilisateur de sélectionner le texte d'info-bulle. Partie du code vient de 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>

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

    OriginalL'auteur user2438271

  6. 0

    Une variante sur la réponse de @naveen. Cela a une durée, mais avec jQuery UI assouplissement ne montre pas du tout jusqu'à ce passé la moitié de la durée (400ms dans ce cas de 800ms). Si l'utilisateur ne veut pas garder la souris a plané, cela fonctionne comme hover intention depuis la bulle d'aide ne serait jamais disponible. Simple, élégante façon de résoudre le problème.

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

    OriginalL'auteur ryanm

  7. 0
    <!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>

    OriginalL'auteur Yordan Georgiev