Posizionamento dinamico del suggerimento Bootstrap (per gli elementi generati dinamicamente)

Question

Utilizzo i suggerimenti forniti da Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).

Ho alcuni markup dinamicamente inseriti nel mio DOM che deve attivare i tooltip. Ecco perché ho innescare i suggerimenti nel modo seguente (https://github.com/twitter/bootstrap/issues/4215):

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

Per evitare i suggerimenti di essere posizionato troppo vicino al bordo dello schermo, ho bisogno essere in grado di impostare la propria posizione dinamicamente in base a dove è posizionato l'elemento che attiva il tooltip. Ho pensato di farlo nel modo seguente:

$('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"; 
} 

Come posso passare currentElement correttamente alla funzione positionTooltip al fine di restituire il valore di collocamento appropriato per ogni suggerimento?

Grazie in anticipo

Answer 1

Bootstrap chiama la funzione di collocamento con params che include l'elemento

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

così nel tuo caso, fare questo:

$('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])' 
}); 

Answer 2

L'opzione placement in Documenti consente per la funzione. Non è documentato (che potrei trovare) quali argomenti sono nella funzione. Tuttavia, è facile determinarlo registrando arguments in console.

Ecco cosa si può usare:

$('body').tooltip({ 

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

    } 

/* other options*/ 
}) 

Answer 3

questo ha funzionato per me

$("[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"; 
      }, 

     }); 

Answer 4

Questo è quanto ho posto il mio suggerimento in 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); 
} 

Fondamentalmente quello che sto dicendo qui è che il mio suggerimento sarà posizionato sulla parte superiore con un po 'personalizzato offset, anche il la piccola freccia triangolare in basso sarà leggermente a destra.

Alla fine sto aggiungendo la classe in che mostra il suggerimento.

Si noti inoltre che il codice è avvolto nella funzione setTimeout 0.

Answer 5

$(element).position() non funziona correttamente se l'opzione container è impostata sul suggerimento.

Nel mio caso, io uso container : 'body' e devo usare $(element).offset() invece.

Answer 6

Questa è una scorciatoia che io uso per determinare larghezza della finestra è più piccola 768 o meno, quindi modificare il posizionamento suggerimento da sinistra in alto:

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