Bulle / info-bulle jQuery Popup [fermé]

J'essaie de créer une "bulle" qui peut apparaître lorsque l' onmouseoverévénement est déclenché et qui restera ouverte tant que la souris est sur l'élément qui a lancé l' onmouseoverévénement OU 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.

J'ai essentiellement accompli cela en écrivant environ 200 lignes de JavaScript laid, mais j'aimerais vraiment trouver un plugin jQuery ou une autre façon de nettoyer un peu cela.

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

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

Cela peut également être fait facilement avec l'événement mouseover. Je l'ai fait et cela ne prend pas du tout 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, c'est faisable avec css.

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

Bien que qTip (la réponse acceptée) soit bonne, 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 vraiment facile à utiliser. (Et je pourrais faire ce dont j'avais besoin)

Ok, après un peu de travail, je suis capable de faire apparaître une "bulle" et de partir à tous les bons moments. Il y a BEAUCOUP de style qui doit encore se produire, mais c'est essentiellement 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>

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 DOM! - événements mouseover / mouseout gérés automatiquement! - définir des événements contextuels personnalisés! - créez des popups intelligents! (dans IE aussi!) - choisissez les modèles de style de popup au moment de l'exécution! - insérez des messages HTML dans des popups! - définir de nombreuses options telles que: distances, vitesse, délais, 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 sur http://plugins.jquery.com/project/jqBubblePopup

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!

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 une info-bulle jQuery . Avec l'option bodyHandler, vous pouvez insérer du HTML arbitraire.

J'essaie de créer une "bulle" qui peut apparaître lorsque l'événement onmouseover est déclenché et restera ouverte tant que la souris est sur l'élément qui a lancé l'événement onmouseover OU 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.

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

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

ColorTip est le plus beau que j'aie jamais vu

La nouvelle version 3.0 du plugin jQuery Bubble Popup prend en charge jQuery v.1.7.2, actuellement la dernière version 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 plugin jQuery & Bubble Popup avec toutes les autres bibliothèques et frameworks javascript comme Script.aculo.us, Mootols ou Prototype car le plugin 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 plugin 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émos et des didacticiels en direct sur http://www.maxvergelli.com/jquery-bubble-popup/

Redimensionner automatiquement la bulle contextuelle simple

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

bubble.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); 
}

Tiptip est également une belle bibliothèque.

Vous pouvez utiliser qTip pour cela; Cependant, vous devrez coder un peu pour le lancer lors d'un événement survolant la souris; Et au cas où vous voudriez un filigrane par défaut sur vos champs de texte, vous devrez utiliser le plugin de filigrane ...

J'ai réalisé que cela conduit à beaucoup de code répétitif; J'ai donc écrit un plugin au-dessus de qTip qui permet d'attacher très facilement une fenêtre contextuelle d'information aux champs de formulaire. Vous pouvez le vérifier ici: https://bitbucket.org/gautamtandon/jquery.attachinfo

J'espère que cela t'aides.