Bootstrap Popover в строке таблицы не закрывается, даже если для «триггера» установлено значение «фокус».

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

Popover создается динамически и отображается с помощью:

$('table#requests tbody tr')
.eq(1)  // highlight row #1
.popover({
    trigger: 'focus',
    placement: 'right',
    html: 'true',
    title: '<strong>Error!</strong>',
    content: 'This line does not make any sense. Click anywhere in the document to close this popover.',
    container: 'body',
})
.popover('show');

Но тогда всплывающее окно не может быть закрыто щелчком вне элемента, как ожидается и задокументировано в документации Bootstrap. Я установил trigger на focus, а container на body, чтобы избежать побочных эффектов с элементами, связанными с таблицей.

Мне удалось воспроизвести проблему на странице https://jsfiddle.net/e31dcs4n/2/.

Обратите внимание, что удаление параметра trigger позволяет щелкнуть строку, чтобы закрыть всплывающее окно (поведение по умолчанию, поскольку всплывающее окно прикреплено к строке). Однако я хочу, чтобы пользователь мог щелкнуть в любом месте, чтобы удалить всплывающее окно.

Также обратите внимание, что вызов .focus(), как подробно описано в Bootstrap Popover Dismissable, не работает нет помощи.


html jquery twitter-bootstrap popover
person Laurent Vaylet    schedule 27.03.2017    source источник
comment
Как насчет этого обходного пути?   -  person Guruprasad J Rao    schedule 27.03.2017
comment
Спасибо @GuruprasadRao. Хороший обходной путь действительно. Можете ли вы придумать что-нибудь, чтобы опция trigger работала как положено? Если никто не предложит лучшего объяснения в ближайшие несколько часов, я отмечу ваш ответ как правильный. Я согласен, что это работает, хотя это может выглядеть как мошенничество :-)   -  person Laurent Vaylet    schedule 27.03.2017

Ответы (1)


arrow_upward
2
arrow_downward

Отвечая на ваш первый вопрос. Вы можете добавить событие щелчка в body, в котором вы можете увидеть, произошел ли щелчок за пределами body, и на основе этого вы можете hide popover.

$('body').on('click', function(e) {
  if ($(e.target).data('toggle') !== 'popover' && $(e.target).parents('.popover.in').length === 0) {
    $('.popover').popover('hide');
  }
});

Вот ДЕМО

Я не уверен, что правильно отвечаю на ваш дополнительный вопрос, указанный в комментариях. Но согласно здесь< /strong> всплывающее окно плохо работает с таблицами. Я также пробовал обходной путь, упомянутый им там, но он не справился. Единственное, что там работает, это запуск hover строки, где вам не нужно добавлять скрытое решение.

$(function() {
  $('table#requests tbody tr:eq(1)').popover({
    placement: 'right',
    html: 'true',
    trigger: 'hover',
    title: '<strong>Error!</strong>',
    container: 'body',
    content: 'This line does not make any sense. Click anywhere in the document to close this popover.',
  })
});

Вот ДЕМО описанного выше поведения.

person Guruprasad J Rao    schedule 28.03.2017
comment
В любое время.. Удачного кодирования.. :) - person Guruprasad J Rao; 28.03.2017