Obtenir des info-bulles personnalisées avec JQuery

Je suis à la recherche d'un exemple de code JQuery ou à la bibliothèque pour afficher les info-bulles lorsque le curseur survole un élément. Plus précisément, ce que je veux faire, c'est afficher mon propre <div> élément sur le vol stationnaire, pas automatiquement construits ou chargé-de-la-accueil-élément d'info-bulle. J'ai regardé un couple JQuery tooltip plugins et ils semblent tous être incapable de le faire, mais sont très complexes dans d'autres façons. Cela semble être quelque chose qui devrait être seulement un couple de lignes de JS/JQuery pour le faire, et je n'ai pas été en mesure de trouver un travail tutoriels.

Une solution idéale pourrait aussi traiter avec les info-bulles à proximité des frontières, ont un "collantes info-bulle", ont la possibilité de charger le code HTML à afficher dans l'infobulle à l'aide d'AJAX (plutôt que de l'inclure dans le code HTML/JS), et bien avec un grand nombre de bulles (seulement montrer un à un, bien sûr).

OriginalL'auteur kquinn | 2009-01-23

  1. 11

    Bien, je ne peux pas vous offrir une solution complète, mais l'obtention d'un div pour apparaître comme une info-bulle est assez simple:

    (function($){

    var $div = $('<div/>').css({
        position: 'absolute',
        background: 'white',
        border: '1px solid black',
        padding: '10px',
        zIndex: 999,
        display: 'none'
    }).appendTo('body');

    $('a.tooltip')
        .mousemove(function(e){
            $div.css({
                top: e.pageY + 10 + 'px',
                left: e.pageX + 10 + 'px'
            });
        })
        .hover(function(){
            $div.show().html('Text to display...');
        }, function(){
            $div.hide();
        });

})(jQuery);

    Un exemple -> http://jsbin.com/emoso

    Semble comme il y a une légère erreur 404 avec le lien...

    OriginalL'auteur James

  2. 0

    J'aime vraiment jTip qui vous permet de fonctionne bien, même en mode ajax, avec l'asynchrone charge d'une ressource externe pour le contenu.

    OriginalL'auteur tanathos

  3. 0

    La jquery plugin tooltip semble être en mesure de faire tout ce que vous voulez. Vous pouvez utiliser le bodyHandler: function() de définir ce que l'info-bulle devrait être. Et il peut être un div que vous avez défini (qui peut même être rempli à l'aide d'ajax quand il est sur le point d'être affiché) Voir le deuxième exemple ici . Je n'ai aucune idée sur le collant info-bulle, mais les autres fonctionnalités sont tous fournis ici.

    OriginalL'auteur anand.trex

  4. 0

    D'accord, je enfin a eu le temps de revoir tout cela et voici ce que j'ai installés sur. Je suis assez content dans l'ensemble, le seul problème que j'ai remarqué, c'est que si vous avez un élément avec une info-bulle dans le coin inférieur droit de la fenêtre, de telle sorte que l'info-bulle n'a pas de place pour être affiché entre l'élément et la bordure de fenêtre, il apparaîtra sur le dessus de l'élément et de commencer à clignoter comme l'accent bascule entre l'élément et la fenêtre contextuelle. Conseils sur la résolution de ce, ou des commentaires généraux sur mon JS style (je l'ai écrit très peu de code JS avant) sont les bienvenues.

    La fonction JavaScript:

    function showInfoBox(parent_index, parent) {

var parent_id = $(this).attr('id');
var infobox_id = parent_id+"_ib";
$("body").append("<div class='infobox' id='"+infobox_id+"'><p>This is an infobox for "+parent_id+"</p></div>"); //customize here
var infobox = $("#"+infobox_id);

$(this).mousemove(function(e){
    var pad = 10;
    var x = Math.min(e.pageX + pad, $(window).width() - infobox.width() - pad);
    var y = Math.min(e.pageY + pad, $(window).height() + $(window).scrollTop() - infobox.height() - pad);
    infobox.css({
        top:  y + 'px',
        left: x + 'px'
    });
})
    .hover(function(){
        infobox.show();
    }, function(){
        infobox.hide();
    });

    };

    Le JQuery pour appeler sur le document de charge:

    $(".SELECTOR-FOR-STUFF-TO-GET-INFOBOXES").each(showInfoBox);

    Le CSS nécessaire:

    .infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}

    OriginalL'auteur kquinn

  5. -1

    Simple Tooltip Jquery dans le waqzah.wordpress.com

    OriginalL'auteur

  6. -1

    Voici une info-bulle personnalisée
    https://z-progrock.com/custom-tooltip-using-jquery/

    OriginalL'auteur zoby