web-dev-qa-db-fra.com

jQuery Popup Bubble / Tooltip

J'essaie de créer une "bulle" pouvant apparaître lorsque l'événement onmouseover est déclenché et reste ouverte tant que la souris survole l'élément qui a lancé l'événement onmouseover OR si la souris est déplacée dans la bulle. Ma bulle devra avoir toutes les manières de HTML et de style, y compris les hyperliens, les images, etc.

En gros, j'ai accompli cela en écrivant environ 200 lignes de javascript, mais j'aimerais vraiment trouver un plugin jQuery ou un autre moyen de nettoyer cela un peu.

javascriptjqueryhtmlcss
99
jakejgordon

Qtip est le meilleur que j'ai jamais vu. C'est MIT sous licence, beau, avec toute la configuration dont vous avez besoin.

Mon option légère préférée est tipy . Aussi MIT sous licence. Cela a inspiré le plugin info-bulle de Bootstrap .

158
Koobz

Cela peut être fait facilement avec l'événement mouseover. Je l'ai fait et cela ne prend pas 200 lignes. Commencez par déclencher l'événement, puis utilisez une fonction qui créera l'info-bulle.

$('span.clickme').mouseover(function(event) {
    createTooltip(event);               
}).mouseout(function(){
    // create a hidefunction on the callback if you want
    //hideTooltip(); 
});

function createTooltip(event){          
    $('<div class="tooltip">test</div>').appendTo('body');
    positionTooltip(event);        
};

Ensuite, vous créez une fonction qui positionne l'info-bulle avec la position de décalage de l'élément DOM qui a déclenché l'événement mouseover. Cette opération est réalisable avec css.

function positionTooltip(event){
    var tPosX = event.pageX - 10;
    var tPosY = event.pageY - 100;
    $('div.tooltip').css({'position': 'absolute', 'top': tPosY, 'left': tPosX});
};
51
konno

Bien que qTip (la réponse acceptée) soit bon, j'ai commencé à l'utiliser et il manquait certaines fonctionnalités dont j'avais besoin.

Je suis ensuite tombé sur PoshyTip - il est très flexible et très facile à utiliser. (Et je pourrais faire ce dont j'avais besoin)

12
Bozho

J'ai programmé un plugin jQuery utile pour créer facilement des popups de bulles intelligentes avec seulement une ligne de code dans jQuery!

Ce que vous pouvez faire: - attachez des popups à n'importe quel élément du DOM! - les événements mouseover/mouseout sont automatiquement gérés! - définir des événements popups personnalisés! - Créez des popups ombrés intelligents! (dans IE aussi!) - choisissez les modèles de style de popup lors de l’exécution! - insérer des messages HTML dans des popups! - définir de nombreuses options comme: distances, vélocité, retards, couleurs…

Les ombres et les modèles colorisés de Popup sont entièrement pris en charge par Internet Explorer 6+, Firefox, Opera 9+, Safari

Vous pouvez télécharger des sources depuis http://plugins.jquery.com/project/jqBubblePopup

4
max

QTip a un bogue avec jQuery 1.4.2. J'ai dû passer à jQuery Bubble Pop up http://www.vegabit.com/jquery_bubble_popup_v2/#examples et cela fonctionne très bien!

4
calvin998

Ok, après un peu de travail, je suis capable de faire apparaître une "bulle" et de partir au bon moment. Il y a BEAUCOUP de style qui doit encore arriver, mais c'est en gros le code que j'ai utilisé.

<script type="text/javascript">
    //--indicates the mouse is currently over a div
    var onDiv = false;
    //--indicates the mouse is currently over a link
    var onLink = false;
    //--indicates that the bubble currently exists
    var bubbleExists = false;
    //--this is the ID of the timeout that will close the window if the user mouseouts the link
    var timeoutID;

    function addBubbleMouseovers(mouseoverClass) {
        $("."+mouseoverClass).mouseover(function(event) {
            if (onDiv || onLink) {
                return false;
            }

            onLink = true;

            showBubble.call(this, event);
        });

        $("." + mouseoverClass).mouseout(function() {
            onLink = false;
            timeoutID = setTimeout(hideBubble, 150);
        });
    }

    function hideBubble() {
        clearTimeout(timeoutID);
        //--if the mouse isn't on the div then hide the bubble
        if (bubbleExists && !onDiv) {
             $("#bubbleID").remove();

             bubbleExists = false;
        }
    }

    function showBubble(event) {
        if (bubbleExists) {
            hideBubble();
        }

        var tPosX = event.pageX + 15;
        var tPosY = event.pageY - 60;
        $('<div ID="bubbleID" style="top:' + tPosY + '; left:' + tPosX + '; position: absolute; display: inline; border: 2px; width: 200px; height: 150px; background-color: Red;">TESTING!!!!!!!!!!!!</div>').mouseover(keepBubbleOpen).mouseout(letBubbleClose).appendTo('body');

        bubbleExists = true;
    }

    function keepBubbleOpen() {
        onDiv = true;
    }

    function letBubbleClose() {
        onDiv = false;

        hideBubble();
    }


    //--TESTING!!!!!
    $("document").ready(function() {
        addBubbleMouseovers("temp1");
    });
</script>

Voici un extrait du code HTML qui va avec:

<a href="" class="temp1">Mouseover this for a terribly ugly red bubble!</a>
4
jakejgordon

Il me semble que vous ne voulez pas que la souris survole les événements: vous voulez l’événement jQuery hover ().

Et ce que vous semblez vouloir, c'est une info-bulle "riche", auquel cas je suggère info-bulle jQuery . Avec l'option bodyHandler, vous pouvez utiliser du code HTML arbitraire.

3
cletus

La nouvelle version 3.0 du plug-in jQuery Bubble Popup prend en charge jQuery v.1.7.2, la version la plus récente et la plus stable de la plus célèbre bibliothèque javascript.

La caractéristique la plus intéressante de la version 3.0 est que vous pouvez utiliser ensemble le plug-in jQuery & Bubble Popup avec toutes les autres bibliothèques et frameworks javascript tels que Script.aculo.us, Mootols ou Prototype car le plug-in est complètement encapsulé pour éviter les problèmes d'incompatibilité.

jQuery Bubble Popup a été testé et prend en charge de nombreux navigateurs connus et "inconnus". voir la documentation pour la liste complète.

Comme les versions précédentes, le plug-in jQuery Bubble Popup continue d'être publié sous la licence MIT. Vous êtes libre d'utiliser jQuery Bubble Popup dans des projets commerciaux ou personnels tant que l'en-tête du droit d'auteur est laissé intact.

téléchargez la dernière version ou visitez des démonstrations en direct et des didacticiels à l'adresse http://www.maxvergelli.com/jquery-bubble-popup/

2
Max

ColorTip est le plus beau que j'ai jamais vu

2
tymonn

J'essaie de créer une "bulle" qui peut apparaître lorsque l'événement onmouseover est déclenché et reste ouverte tant que la souris survole l'élément ayant lancé l'événement onmouseover OR si la souris est déplacée dans la bulle. Ma bulle devra avoir toutes les manières du langage HTML et du style, y compris les hyperliens, les images, etc.

Tous ces événements entièrement gérés par ce plugin ...

http://plugins.jquery.com/project/jqBubblePopup

2
max

Auto-taille simple Popup Bubble

index.html

<!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">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link href="bubble.css" type="text/css" rel="stylesheet" />
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript" src="bubble.js"></script>
</head>
<body>
  <br/><br/>
  <div class="bubbleInfo">
      <div class="bubble" title="Text 1">Set cursor</div>
  </div>
  <br/><br/><br/><br/>
  <div class="bubbleInfo">
      <div class="bubble" title="Text 2">Set cursor</div>
  </div>
</body>
</html>

bubble.js

$(function () {     
  var i = 0;
  var z=1;
  do{
    title = $('.bubble:eq('+i+')').attr('title');
    if(!title){
      z=0;
    } else {
       $('.bubble:eq('+i+')').after('<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop" class="popup"><tbody><tr><td id="topleft" class="corner"></td><td class="top"></td><td id="topright" class="corner"></td></tr><tr><td class="left"></td><td>'+title+'</td><td class="right"></td></tr><tr><td class="corner" id="bottomleft"></td><td class="bottom"><img src="bubble/bubble-tail.png" height="25px" width="30px" /></td><td id="bottomright" class="corner"></td></tr></tbody></table>');
       $('.bubble:eq('+i+')').removeAttr('title');
    }
    i++;
  }while(z>0)

  $('.bubbleInfo').each(function () {
    var distance = 10;
    var time = 250;
    var hideDelay = 500;        
    var hideDelayTimer = null;       
    var beingShown = false;
    var shown = false;
    var trigger = $('.bubble', this);
    var info = $('.popup', this).css('opacity', 0);        

    $([trigger.get(0), info.get(0)]).mouseover(function () {
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      if (beingShown || shown) {
        // don't trigger the animation again
        return;
      } else {
        // reset position of info box
        beingShown = true;

        info.css({
        top: -40,
        left: 10,
        display: 'block'
        }).animate({
        top: '-=' + distance + 'px',
        opacity: 1
        }, time, 'swing', function() {
          beingShown = false;
          shown = true;
        });
      }          
      return false;
    }).mouseout(function () {
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
        info.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, time, 'swing', function () {
          shown = false;
          info.css('display', 'none');
        });
      }, hideDelay);
      return false;
    });
  }); 
});

bulle.css

/* Booble */
.bubbleInfo {
    position: relative;
    width: 500px;
}
.bubble {       
}
.popup {
    position: absolute;
    display: none;
    z-index: 50;
    border-collapse: collapse;
    font-size: .8em;
}
.popup td.corner {
    height: 13px;
    width: 15px;
}
.popup td#topleft { 
    background-image: url(bubble/bubble-1.png); 
} 
.popup td.top { 
    background-image: url(bubble/bubble-2.png); 
}
.popup td#topright { 
    background-image: url(bubble/bubble-3.png); 
}
.popup td.left { 
    background-image: url(bubble/bubble-4.png); 
}
.popup td.right { 
    background-image: url(bubble/bubble-5.png); 
}
.popup td#bottomleft { 
    background-image: url(bubble/bubble-6.png); 
}
.popup td.bottom { 
    background-image: url(bubble/bubble-7.png); 
    text-align: center;
}
.popup td.bottom img { 
    display: block; 
    margin: 0 auto; 
}
.popup td#bottomright { 
    background-image: url(bubble/bubble-8.png); 
}
1
Pulsar

Vous pouvez utiliser qTip pour cela; Cependant, vous devrez coder un peu pour le lancer lors d'un événement mouseover; Et si vous voulez un filigrane par défaut sur vos champs de texte, vous devrez utiliser le plug-in filigrane ...

J'ai réalisé que cela conduisait à beaucoup de code répétitif; J'ai donc écrit un plug-in au-dessus de qTip qui permet d'attacher facilement des fenêtres d'information contextuelles à des champs de formulaire. Vous pouvez le vérifier ici: https://bitbucket.org/gautamtandon/jquery.attachinfo

J'espère que cela t'aides.

1
Gautam Tandon

Tiptip est aussi une belle bibliothèque.

1
somecallmemike