Динамически позиционировать подсказку Bootstrap (для динамически генерируемых элементов)

Я использую подсказки, предоставленные Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).

У меня есть динамически вставленная разметка в моей DOM, которая должна запускать всплывающие подсказки. Поэтому я вызываю подсказки следующим образом (https://github.com/twitter/bootstrap/issues/4215):

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

Чтобы избежать слишком приближения всплывающих подсказок к краю экрана, я должен иметь возможность динамически устанавливать их положение в зависимости от того, где находится элемент, который запускает всплывающую подсказку. Я думал о том, чтобы сделать это следующим образом:

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

Как я могу правильно передать currentElement функции positionTooltip, чтобы вернуть соответствующее значение места размещения для каждой подсказки?

Заранее спасибо

Ответы

Ответ 1

Bootstrap вызывает функцию размещения с параметрами, которые включают элемент

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

поэтому в вашем случае сделайте следующее:

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

Ответ 2

Опция placement в документах позволяет использовать функцию. Это не документировано (что я могу найти), какие аргументы в функции. Это легко определить, если зарегистрировать arguments для консоли.

Здесь вы можете использовать:

$('body').tooltip({

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

  }

/* other options*/
})

Ответ 3

Вот как я поместил свою подсказку в 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);
}

В основном, я говорю здесь, что моя подсказка будет располагаться сверху с помощью специального пользовательского смещения, а маленькая стрелка треугольника внизу будет немного вправо.

В конце я добавляю класс in, который показывает всплывающую подсказку.

Также обратите внимание, что код завернут в функцию setTimeout 0.

Ответ 4

Это сокращение, которое я использую для определения ширины окна, меньше 768 или нет, затем измените размещение всплывающей подсказки слева направо:

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

Ответ 5

этот работал у меня

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

        });

Ответ 6

$(element).position() не будет работать должным образом, если для параметра container установлена подсказка.

В моем случае я использую container : 'body' и вместо этого должен использовать $(element).offset().