web-dev-qa-db-fra.com

Positionner dynamiquement l'infobulle Bootstrap (pour les éléments générés dynamiquement)

J'utilise les info-bulles fournies par Twitter Bootstrap (http://Twitter.github.com/bootstrap/javascript.html#tooltips).

J'ai quelques balises insérées dynamiquement dans mon DOM qui doivent déclencher les info-bulles. C'est pourquoi je déclenche les info-bulles de la manière suivante (https://github.com/Twitter/bootstrap/issues/4215):

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    selector: '[rel=tooltip]:not([disabled])'
});

Pour éviter que les info-bulles ne soient placées trop près du bord de l'écran, je dois pouvoir définir leur position de manière dynamique en fonction de l'emplacement de l'élément qui déclenche l'info-bulle. J'ai pensé le faire de la manière suivante:

   $('body').tooltip({
        delay: { show: 300, hide: 0 },
        // here comes the problem...
        placement: positionTooltip(this),
        selector: '[rel=tooltip]:not([disabled])'
    });



function positionTooltip(currentElement) {
     var position = $(currentElement).position();

     if (position.left > 515) {
            return "left";
        }

        if (position.left < 515) {
            return "right";
        }

        if (position.top < 110){
            return "bottom";
        }

     return "top";
}

Comment puis-je transmettre correctement currentElement à la fonction positionTooltip afin de renvoyer la valeur de placement appropriée pour chaque info-bulle?

Merci d'avance

javascriptjquerytwitter-bootstraptooltip
22
maze

Bootstrap appelle la fonction de placement avec des paramètres incluant l'élément 

this.options.placement.call(this, $tip[0], this.$element[0])

alors dans votre cas, faites ceci:

$('body').tooltip({
    delay: { show: 300, hide: 0 },
    placement: function(tip, element) { //$this is implicit
        var position = $(element).position();
        if (position.left > 515) {
            return "left";
        }
        if (position.left < 515) {
            return "right";
        }
        if (position.top < 110){
            return "bottom";
        }
        return "top";
    },
    selector: '[rel=tooltip]:not([disabled])'
});
34
davidkonrad

C’est ainsi que je place mon info-bulle dans Bootstrap 2.3.2 

placement: function (tooltip, trigger) {
    window.setTimeout(function () {
        $(tooltip)
            .addClass('top')
            .css({top: -24, left: 138.5})
            .find('.tooltip-arrow').css({left: '64%'});

        $(tooltip).addClass('in');
    }, 0);
}

En gros, ce que je dis ici, c’est que mon info-bulle sera positionnée en haut avec un décalage personnalisé, ainsi que la petite flèche triangulaire en bas sera légèrement à droite.

À la fin, j'ajoute la classe in qui affiche l'info-bulle.

Notez également que le code est encapsulé dans la fonction setTimeout 0.

5
simo

L'option placement dans docs permet une fonction. Ce n'est pas documenté (que je pourrais trouver) quels arguments sont dans la fonction. Ceci est cependant facile à déterminer en enregistrant arguments sur la console.

Voici ce que vous pouvez utiliser:

$('body').tooltip({

   placement: function(tip, el){
     var position = $(el).position();
      /* code to return value*/

  }

/* other options*/
})
5
charlietfl

Ceci est un raccourci que j’utilise pour déterminer si la largeur de la fenêtre est inférieure ou inférieure à 768, puis modifie le placement de l’info-bulle de gauche à haut:

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}
1
Mohsen

celui-ci a fonctionné pour moi

$("[rel=tooltip]").popover({
            placement: function(a, element) {
               var position = $(element).parent().position();
               console.log($(element).parent().parent().is('th:first-child'));

                if ($(element).parent().parent().is('th:last-child')) {
                    return "left";
                }
                if ($(element).parent().parent().is('th:first-child')) {
                    return "right";
                }
                return "bottom";
            },

        });
0
Jonathan

$(element).position() ne fonctionnera pas correctement si l'option container est définie sur l'info-bulle.

Dans mon cas, j'utilise container : 'body' et je dois utiliser $(element).offset() à la place.

0
Ludovic Guillaume