Ne fermez les info-bulles que si la souris n’est pas au-dessus de sa cible

À l’aide de l’info-bulle de l’interface utilisateur de jQuery, je souhaite que cette info-bulle rest ouverte si la cible est dépassée ou si l’info-bulle en elle-même est affichée.

Je pense que je peux utiliser le rappel rapproché pour voir si je suis au-dessus d’une info-bulle ou d’une zone cible, bien que je devrais alors affecter une autre fonction de souris.

Voici mon jsfiddle: http://jsfiddle.net/Handyman/fNjFF/

$(function() { $('#target').tooltip({ items: 'a.target', content: 'just some text to browse around in' }); }); 
     

Je travaille actuellement pour voir ce que je peux trouver.

    Voici la solution que j’ai trouvée après de nombreuses recherches et tests: http://jsfiddle.net/Handyman/fNjFF/11/

     $('#target').tooltip({ items: 'a.target', content: 'Loading…', show: null, // show immediately open: function(event, ui) { if (typeof(event.originalEvent) === 'undefined') { return false; } var $id = $(ui.tooltip).attr('id'); // close any lingering tooltips $('div.ui-tooltip').not('#' + $id).remove(); // ajax function to pull in data and add it to the tooltip goes here }, close: function(event, ui) { ui.tooltip.hover(function() { $(this).stop(true).fadeTo(400, 1); }, function() { $(this).fadeOut('400', function() { $(this).remove(); }); }); } }); 
           

    C’est une solution simple pour les éléments div:

     $(function() { $("#mydiv").tooltip({ effect: 'slide', content: 'loading...', open: function (event, ui) { $(ui.tooltip).appendTo(this); } }); }); 

    http://jsfiddle.net/4YDGp/10/

    Il n’est pas intégré, car l’équipe de jQuery UI ne pensait pas que cela apporterait une valeur ajoutée. Vous pouvez lire la demande de fonctionnalité ici . Il existe des liens vers des projets comme celui-ci ( démo ) qui ajoutent l’effet recherché.

    Vous pouvez le faire avec ce plugin minimal:

    $('[title|=ptooltip]').pTooltip();

    Ou vous pouvez regarder dans qTip ou d’autres plugins plus robustes.

    J’avais un objective similaire: avoir une info-bulle d’amorçage avec un lien HTML restr ouverte jusqu’à ce que vous cliquiez ailleurs ou que vous ouvriez une autre info-bulle (pour que l’utilisateur puisse cliquer sur le lien dans l’info-bulle).

    Voici ma solution basée sur quelques posts précédents:

     /** * For tooltips with links, don't remove hover until click somewhere else or open another tooltip */ $(function() { // Show tooltip with html link $('#tip').on("mouseover", function() { $('#tip').tooltip('show'); }); // If open any other tooltip, close the one with the link. $('[rel="tooltip"]').not('#tip').on("mouseover", function() { $('#tip').tooltip('hide'); }); // If click any where hide tooltip with link $(document).click(function() { $('#tip').tooltip('hide'); }); }); 

    Le code HTML pour le ressemble à ceci. La clé consiste à définir le déclencheur de données sur “” pour le conseil avec le code HTML.

      Linked ToolTip  

    JSFiddle