Dynamicznie umieszczaj etykietę Bootstrap (dla dynamicznie generowanych elementów)

Question

Używam podpowiedzi dostarczanych przez Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).

Mam niektóre dynamicznie wstawiane znaczniki w moim DOM, które musi wywołać podpowiedzi. Dlatego wywołać podpowiedzi w następujący sposób (https://github.com/twitter/bootstrap/issues/4215):

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

Aby uniknąć etykietki są umieszczone zbyt blisko krawędzi ekranu, muszę aby móc ustawić swoją pozycję dynamicznie na podstawie położenia elementu, który uruchamia etykietę narzędzia. Myślałem, że robi to w następujący sposób:

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

Jak mogę przekazać currentElement prawidłowej funkcji positionTooltip w celu przywrócenia odpowiedniej wartości kwalifikacyjny dla każdej podpowiedzi?

Dzięki z góry

Answer 1

Bootstrap wywołuje funkcję kwalifikacyjny z params że zawiera element

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

więc w Twoim przypadku, to zrobić:

$('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

Opcja w docs placement pozwala na funkcję. Nie jest udokumentowane (żebym mógł znaleźć) jakie argumenty są w funkcji. Można to jednak łatwo ustalić, rejestrując arguments na konsoli.

Oto co można użyć:

$('body').tooltip({ 

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

    } 

/* other options*/ 
}) 

Answer 3

ten pracował dla mnie

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

ten sposób umieścić moją podpowiedź w 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); 
} 

zasadzie to, co mówię, jest to, że moja podpowiedź będzie umieszczony na górze z niektórych niestandardowych offset, również mała strzałka trójkąta u dołu będzie nieznacznie z prawej strony.

Pod koniec dodaję klasę in, która pokazuje etykietkę narzędzia.

Należy również pamiętać, że kod jest zawijany w funkcji setTimeout 0.

Answer 5

$(element).position() nie będzie działać poprawnie, jeśli opcja container jest ustawiona na etykietce narzędzi.

W moim przypadku używam container : 'body' i zamiast tego muszę użyć $(element).offset().

Answer 6

To jest skrótem, który mogę używać, aby określić szerokość okna jest mniejszy lub nie 768, a następnie zmienić rozmieszczenie podpowiedzi z lewej na górze:

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