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
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])'
});
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
.
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*/
})
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";}
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";
},
});
$(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.