web-dev-qa-db-fra.com

Fermer l'infobulle uniquement si la souris n'est pas sur la cible ou l'infobulle

En utilisant l'info-bulle jQuery UI, je voudrais laisser l'info-bulle ouverte si je dépasse la cible ou si je dépasse l'info-bulle elle-même.

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 ensuite attribuer une autre fonction mouseout.

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

$(function()
{
    $('#target').tooltip({
        items: 'a.target',
        content: 'just some text to browse around in'
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="target">
    <a href="#" class="target">Hover over me!</a>
    <a href="#" class="target">Hover over me too!</a>
</div>

J'y travaille maintenant pour voir ce que je peux trouver.

jqueryjquery-uijquery-ui-tooltip
30
Francis Lewis

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();
            });
        });
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
    <div id="target">
        <a href="#" class="target">Hover over me!</a>
        <a href="#" class="target">Hover over me too!</a>
    </div>
</body>

J'avais également un problème avec les info-bulles persistantes lorsqu'il y avait un tas de liens d'infobulles à proximité, de sorte que les info-bulles finiraient par s'empiler ou ne se ferment pas du tout, donc cela ferme toutes les autres info-bulles ouvertes lorsqu'une info-bulle est ouverte.

44
Francis Lewis

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/

4
Stano

J'avais un objectif similaire d'avoir une bootstrap info-bulle avec un lien HTML rester ouverte jusqu'à ce que vous cliquiez ailleurs ou ouvrez une autre info-bulle (afin que l'utilisateur puisse cliquer sur le lien dans l'info-bulle).

Voici ma solution basée sur certains articles 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 HTML pour le ressemble à ceci. La clé est d'avoir le déclencheur de données défini sur "" pour la pointe avec le code HTML.

<span id="tip" data-trigger="" rel="tooltip" data-html="true" title="This is the <a href= &quot; https://www.google.com &quot; target=‘_blank’ rel=‘noopener’>tip</a>."> Linked ToolTip </span>

JSFiddle

1
Geoffrey Bourne

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

Vous pouvez le faire avec ce plugin minimal:

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

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

1
Josh